小程序开发-多图上传

　　博主在用uniapp开发小程序的时候发现一个问题。使用图片上传功能的时候，小程序无法使用uni.uploadFile内的files字段一次性上传多张图片；只能循环一张一张图片上传；那么就涉及一个问题，循环上传过程中可能第一张图片已经上传好了，但后续的图片还没有上传完成；这时候结束页面的加载状态会出现图片不完全显示的问题。

　　解决方案：使用Promise.all，待所有上传完成后再进入then函数，关闭页面的加载状态。

　　话不多说，上代码：

// 多图上传 使用promise.all .js文件
// 传入参数：count:最大图片数；successcc:成功后调用的函数，failcc:失败后调用的函数

    uploadImgs(count, successcc, failcc) {
        uni.chooseImage({
            count: count,
            fail(err) {
                if (err.errCode == 0) {
                    uni.showModal({
                        title: "提示",
                        content: "您暂未允许应用读写设备上的照片及文件，请前往设置-应用权限开启该权限"
                    })
                    return
                }
                if (err.errMsg.includes('No Permission')) {
                    uni.showModal({
                        title: "提示",
                        content: "您暂未允许应用拍摄与录制，请前往设置-应用权限开启该权限"
                    })
                    return
                }
            },
            success(files) {
                console.log("数据", files)
                uni.showLoading({
                    title: "图片上传中",
                    mask:true
                })
                Promise.all(files.tempFilePaths.map(itm => uploadF(itm))).then(res => {
                    console.log(res, 'promise')
                    successcc && successcc(res)
                }).catch(err => {
                    console.log(err, 'promise')
                    failcc && failcc(err)
                })
            }
        })

        function uploadF(filepath) {
            return new Promise((resolve, reject) => {
                wx.uploadFile({
                    filePath: filepath,
                    name: 'file',
                    url: HTTP_REQUEST_URL + '/staffapi/upload/image',
                    success(res) {
                        resolve(res.data);
                    },
                    fail(msg) {
                        reject();
                    }
                })
            });
        }
    },

　　页面中的调用：

this.$util.uploadImgs(count, (res) => {
      uni.hideLoading()
           console.log(res,'promise back')
           _this.formdata.ss_array[index].ss_img = res
     }, (err) => {
         uni.showToast({
           title: "图片上传失败,单图最大不能超过10M",
           icon: "none"
       })
})

　　这样的话Promise.all就会在执行了所有函数后再返回，图片就会一次性全部加载出来；但是会加大用户的等待时间。

　　如果是使用微信开发者工具来开发小程序，这一部分也是一样的，只需要将uni. 改成wx. 即可。