适用范围:在处理含有多张图片上传/修改时
如图:在数组中存在object类型的图片,我目标是进行修改ChapPicture[i].ChapPicture的值(动态绑定) 因此i是变量,需要从前端拿值:
<view class="btn blue" wx:for="{{ChapPicture}}">
<image src="{{item.ChapPicture}}" data-idx="{{item.idx}}" mode="aspectFit" bindtap="uploadLaboratoryTestSheets"></image>
<van-cell-group>
<van-field
data-idx="{{item.idx}}"
model:value="{{ item.tempPictureInfo }}"
clearable
label="图片备注"
placeholder="请输入图片备注:"
bind:click-icon="onClickIcon"
/>
</van-cell-group>
</view>
通过data-idx来获取点击的序号,之后在uploadLaboratoryTestSheets()方法中实现对数组中obj对象的修改:
uploadLaboratoryTestSheets(e) {
console.log('upload uploadLaboratoryTestSheets',e.currentTarget.dataset.idx)
var tempDataOfIdx=e.currentTarget.dataset.idx
wx.chooseImage({
count:6,
sizeType:'compressed',
sourceType:['album', 'camera'],
success:res=>{
// console.log(res.tempFilePaths[0])
var photoTempPath = res.tempFilePaths[0]
// this.uploadLaboratoryTestSheetsToDatabase(photoTempPath)
wx.cloud.uploadFile({
cloudPath:"photo/"+Date.now()+".jpg",
filePath:photoTempPath
})
.then(res=>{
console.log('uploadLaboratoryTestSheetsToDatabase success',res)
this.setData({
[`ChapPicture[${tempDataOfIdx-1}].ChapPicture`]:res.fileID
})
})
}
})
},
这样就可以实现动态修改图片的操作:
选中图片后:
这个是赋值的关键:
this.setData({
[`ChapPicture[${tempDataOfIdx-1}].ChapPicture`]:res.fileID
})
注意 是‘`’ 而不是‘'’!