mpvue开发小程序选择图片页面不渲染是这么回事?
选择图片后上传服务器,页面上展示服务器网络图片路径
第一次上传完成页面不渲染,但是数据已经修改了
选择第二张,上传完成后第一张才会渲染出来,而第二张没有,第三张同上,以此类推
以下是代码
chooseImg (idx) { // 选择图片
var _this = this
console.log(idx)
wx.chooseImage({
count: 1, // 最多可以选择的图片张数,默认9
sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
success: res => {
console.log(res)
var tempFilePath = res.tempFilePaths[0]
_this.$comfun.upLoadImg(tempFilePath, function (res) { // 公共js里的上传图片方法
console.log(res)
if (res.statusCode === 200) {
res.data = JSON.parse(res.data)
if (res.data.code === 0) {
var data = _this.detail
var imgs = data.nodeList[idx].voucherImg
imgs.push(res.data.img)
_this.detail = data
} else {
wx.showToast({
title: '图片上传失败',
icon: 'none'
})
}
console.log(_this.detail.nodeList[idx].voucherImg)
} else {
wx.showToast({
title: '网络错误',
icon: 'none'
})
}
})
}
})
}
// html
<div class="taskNodeListContainer">
<div class="pingzhengTitle" v-if="detail.isJoin!=1">任务节点要求</div>
<div class="pingzhengTitle" v-if="detail.isJoin==1">节点凭证上传</div>
<div class="taskNodeList">
<div class="taskNodeItem" v-for="(node,nIndex) of detail.nodeList" :key="nIndex">
<div class="nodeTitle">{{node.nodeName}}</div>
<div class="nodeContent">节点任务量:{{node.nodeNum}}</div>
<span class="nodeFlag"></span>
<div class="upLoadImgContainer" v-if="detail.isJoin>0">
<div v-for="(img, iIndex) of node.voucherImg" :key="iIndex" class="nodeImgItem">
<img :src="IMG_BEFORE_BASE_URL + img" mode="aspectFill">
</div>
<div class="upLoadBtn" @click="chooseImg(nIndex)" v-if="detail.isJoin!=4">+</div>
</div>
</div>
</div>
</div>
// 数据格式
求大神帮忙看看