在后台有一个list存所有图片。当用户上传多张照片时理应全都显示在页面上,但偶尔会有只显示一两张的情况。如果用户在其他地方上传一张照片,少显示的图就都能正常显示了(其他地方也调用的这个uploadImage)
uploadImage是循环调用的,但只有最后一次循环会用setData修改页面,以下是代码
uploadImage: function (filePath, cloudPath, deficNumber, isLastOne) {
wx.showLoading({
title: '图片上传中',
})
wx.cloud.uploadFile({
cloudPath: cloudPath,
filePath: filePath
}).then(res => {
var deficList = this.data.deficList
deficList[deficNumber]["缺陷照片"].push(res.fileID)
if (isLastOne) {
this.setData({
deficList: deficList,
hideDeficImg: false
})
wx.hideLoading()
wx.showToast({
title: '图片已上传',
icon: 'success',
duration: 900
})
}
},
<view wx:for="{{deficList[index]['缺陷照片']}}" wx:for-item="element" wx:key="index" class="imageContainer">
<image src="{{element}}" class="image" hidden="{{hideDeficImg}}"></image>
</view>
这是调用uploadImage的代码:
uploadDeficiencyImage: function (e) { var deficNumber = e.currentTarget.dataset.id var StationName = this.data.StationName if (StationName.replace(/(^s*)|(s*$)/g, "").length == 0) { wx.showToast({ title: '请输输入名字', icon: 'error', duration: 900 }) } else { wx.chooseMedia({ count: 3, mediaType: ['image'], sizeType: ['compress'], success: res => { var count = res.tempFiles.length var isLastOne = false var deficCount = this.data.deficList[deficNumber]["缺陷照片"].length for (var i = 0; i < count; i++) { var filePath = res.tempFiles[i].tempFilePath if (i == count - 1) { isLastOne = true } if (this.checkImageType(filePath)) { this.uploadImage(filePath, "缺陷照片/" + this.data.StationName + "_缺陷" + (deficNumber + 1) + "." + (++deficCount) + "_" + Date.now() + this.getImageType(filePath), deficNumber, isLastOne) } else { wx.showToast({ title: '非png,jpg,jpeg格式', icon: 'error', duration: 1800 }) } } } }) } },