多文件上传时的异步转同步

技术概述

微信小程序要上传多图，并让多个上传进程最后保持同步返回结果,也适用于各种文件的上传

技术详述

上传一张图片

上传一张图片到微信存储需要先获取文件的后缀名，才能在云端读取时不出错

    let item = this.data.pic;//图片的暂存地址
    let suffix = /\.\w+$/.exec(item)[0];//正则表达式返回文件的扩展名，可以参考各种正则教程
    wx.cloud.uploadFile({
        cloudPath: new Date().getTime()+suffix, // 上传至云端的路径
        filePath: item,
        success: res=>{
        wx.showToast({
            title: "上传成功",//弹出提示
        })
        this.setData({
            pic:res.fileID //将返回值中的文件在云端的id赋值给data中的数据
        })
        },
        fail: res=>{
        wx.showToast({
            title: "上传失败",//弹出提示
        })
        }
    })

上传多张图片

可以很自然的想到，如果我们要上传多张图片，那么就将以上过程放入for循环就行了，但是如果只是单纯的使用for循环，会导致上传顺序出错，并且无法确保所有图片都上传成功，所以要使用promise.all()来执行一系列异步操作并返回一个正确顺序的结果集。

wx.showLoading({
        title: '正在上传',//在上传开始后，将出现loading幕布，确保用户不会误操作
        mask:true
    })
let promiseArr = [];//存放promise的集合
for (let index = 0; index < this.data.picBox.length; index++) {
    promiseArr.push(new Promise((reslove,reject)=>{
    let item = this.data.picBox[index];
    let suffix = /\.\w+$/.exec(item)[0];//正则表达式返回文件的扩展名
    wx.cloud.uploadFile({
        cloudPath: new Date().getTime() + index +suffix, // 上传至云端的路径，加上index是为了防止执行时间同步造成图片覆盖
        filePath: item,
        success: res=>{
        this.setData({
            picId:this.data.picId.concat(res.fileID)//数组连接
        })
        reslove('成功');//执行成功，返回一个状态为“成功”的promise对象
        },
        fail: res=>{
        wx.hideLoading();
        wx.showToast({
            title: "上传失败",
        })
        reject('失败');//异步调用失败，只要有一个失败整个系列的异步过程就都失败了，返回一个状态为“失败”的对象
        }
    })
    }))
}
Promise.all(promiseArr).then(res=>{//返回值将会按照参数内的promise 顺序排列，而不是由调用 promise 的完成顺序决定
    console.log(res);
    //res中存放的是每个promise对象的结果集，失败则是第一个失败promise对象的结果集
    wx.hideLoading();
    wx.showToast({
    title: "上传成功",
    })

如果上传成功五张图片，则打印出的res是

技术使用中遇到的问题和解决过程。

遇到的问题：上传时如果以时间戳作为文件名可能会出现两个promise调用的时间相同，导致文件名相同而产生覆盖。
解决过程：为每个文件名的末尾加上它的独特编号

cloudPath: new Date().getTime() + index +suffix

总结

Promise.all(iterable)方法返回一个 [Promise]，此实例在 iterable 参数内所有的 promise 都“完成（resolved）”或参数中不包含 promise 时回调完成（resolve）；如果参数中 promise 有一个失败（rejected），此实例回调失败（reject），失败原因的是第一个失败 promise 的结果。promise风格调用极大程度的便利了回调函数的阅读，也让异步操作的同步变得更加简单，非常值得学习

参考博客

JavaScript - promise.all()及实现
Promise初步详解（resolve，reject，catch）
微信小程序之上传多张图片（云开发）