微信小程序 动态修改图片并将图片实时更新

适用范围：在处理含有多张图片上传/修改时

如图：在数组中存在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
        })

注意 是‘`’ 而不是‘'’!