进阶方式原理: 无论上传、删除都在操作本地的images数组，不与服务器关联操作，
最后提交的数据的时候，先执行 图片上传操作(使用场景，图文发布，发帖，评论),再
提交数据。
这样的好处是很明显的
1、无论用户上传或删除操作n次都没问题;
2、相对普通方式体验更好 ，没延迟
既然这么爽，现在就开始改造之旅。。充满了激情！
//图片上传
chooseImg(e) {
let that=this,
imgs = that.data.images;
if (imgs.length >= 3) {
jumpM.showModal({ msg: '亲,最多上传3张' })
return false;
}
wx.chooseImage({
count: 3, //最多可以选择的图片张数
sizeType: ['original', 'compressed'], //可选择原图或压缩后的图片
sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
success(res) {
let dataImage = that.data.images,
images = dataImage.concat(res.tempFilePaths) // tempFilePath可以作为img标签的src属性显示图片
if (images.length > 3) {
let arr = images.slice(0, 3)
that.setData({ images: arr })
return false
}
that.setData({ images })
}
})
},
// 删除图片
deleteImg: function (e) {
let that=this,
imgs = that.data.images,
index = e.currentTarget.dataset.index
imgs.splice(index, 1); //记录本地路径删除
that.setData({ //从渲染中删除
images: imgs,
})
},
// 预览图片
previewImg: function (e) {
//获取当前图片的下标
var index = e.currentTarget.dataset.index;
//所有图片
var imgs = this.data.images;
wx.previewImage({
//当前显示图片
current: imgs[index],
//所有图片
urls: imgs
})
},
以上操作就实现了,用户可以n次 操作上传和删除 且体验无延迟！
上面说到提交数据流程：先上传图片、再执行提交数据。
这里须使用promise来完成，promise 的then可以监听到图片是否上传完成！
//上传云图片
uploadCloud_img(imagesArr){
let that=this,
tel =that.data.tel,
time = that.data.date != '' ? this.data.date : util.formatTime(new Date()), // 如果服务器时间不为空取服务器时间否则取当前时间
bigImg=[] //用于存储上传后的图片地址
//改写: 数组 多图片
const filePath = imagesArr, cloudPath = [];
/*循环封装图片存储路径
*路径：stick/13888888888/20190424/201904240.jpg
*/
filePath.forEach((item, i)=>{
let res= filePath[i].match(/\.[^.]+?$/)
cloudPath.push(`stick/${tel}/${time}/${time}${i}${res}`)
})
return new Promise(function (resolve, reject) {
cloudPath.forEach((item, i) => {
wx.cloud.uploadFile({
cloudPath: cloudPath[i], //云存储路径
filePath: filePath[i], //本地文件路径
success: res => {
bigImg.push(res.fileID);
if (i + 1 == cloudPath.length) { resolve(bigImg) };
},
fail: err => {
wx.showToast({ title: `第${i + 1}上传失败`, icon: 'none', duration: 1500 });
reject(err)
}
})
})//forEach_end
})
},
下面是提交数据的作,我这里删除部分逻辑，每个业务都不一样，我就表达个意思(promise 的then)！
submitData(){
let that=this;
wx.showLoading({ title: '正在请求', mask: true }
that.uploadCloud_img(images).then(imgRes=>{
dataObj.images = imgRes
}).then(res=>{
that.uploadData(that.data.jumpPage, jumpM.stickDate, dataObj, that.data.switchstate)
})
},
图片上传进阶方式就介绍到这里，有什么疑问可留言，相互学习共同进步!
网友评论