多张图片上传（源码分享+实现分析）

本篇文章以小程序中的代表【微信小程序】为例，分享一下在微信小程序中实现多图上传的源码实现。
其它小程序和uniapp都可通过该思路实现

代码片段（可导入微信WEB开发者工具体验）：https://developers.weixin.qq.com/s/DHrt69mk7af3

两种不同实现方法的优缺点，请查看我的 博客原创文章，在文章中有详细的说明

小程序 多张图片上传 文章地址：https://blog.csdn.net/u013350495/article/details/104326088。

JS源码：

Page({  
  data: {  
    // 已选择上传的本地图片地址  
    urlArr:['helang.jpg','1846492969.jpg','web.jpg']  
  },  
  onLoad: function () {  

  },  
  // 多图上传-回调式  
  uploadCallback(){  
    let index = 0;  // 当前位置，标识已上传到第几张图片  
    let newUrls = []; // 上传成功后的图片地址数组  
    // 图片上传方法  
    let upload = ()=>{  
      let nowUrl = this.data.urlArr[index]; //当前待上传的图片地址  
      wx.showLoading({  
        title: '正在上传',  
      });  
      /*   
        无图片上传接口，收setTimeout 模拟延迟状态  
        项目中替换为 wx.uploadFile 即可  
      */  
      // 假设每 1000ms 上传一张图片  
      setTimeout(()=>{  
        // 此处为已上传成功后的回调函数内容  
        let resUrl = `服务器返回上传后的地址 ${nowUrl}`; //假设这是上传成功后返回的地址  
        newUrls.push(resUrl); // 将上传后的地址添加到成功数组中  

        // 判断图片是否已经全部上传完成  
        if (index >= (this.data.urlArr.length-1)){  
          send();  
        }else{  
           //未全部上传完时标识位置+1并再次调用上传方法  
          index++;   
          upload();  
        }  
      },1000);  
    }  
    // 发送方法,用作图片上传完后，得到图片地址提交给其它接口或其它操作  
    let send = () => {  
      // 关闭加载提示  
      wx.hideLoading();  
      wx.showToast({  
        title: '上传成功',  
        icon:'success'  
      })  

      // 输出已经上传完的图片地址，请查看控制台结果  
      console.log(newUrls);  
    }  

    // 调用上传方法  
    upload();  
  },  
  // 多图上传-Promise  
  uploadPromise(){  
    /* Promise 对象数组 */  
    let p_arr = [];  

    /* 新建 Promise 方法，nowUrl参数为当前上传的图片地址 */  
    let new_p = (nowUrl) => {  
      return new Promise((resolve, reject) => {  
        /*   
        无图片上传接口，收setTimeout 模拟延迟状态  
        项目中替换为 wx.uploadFile 即可  
        */  
        // 假设每 1000ms 上传一张图片  
        setTimeout(()=>{  
          // 此处为已上传成功后的回调函数内容  
          let resUrl = `服务器返回上传后的地址 ${nowUrl}`; //假设这是上传成功后返回的地址  
          resolve(resUrl);  
        },1000);  
      })  
    }  

    // 遍历数据，创建相应的 Promise 数组数据  
    this.data.urlArr.forEach((item, index) => {  
      let nowUrl = this.data.urlArr[index]; //当前待上传的图片地址  
      p_arr.push(new_p(nowUrl));  
    });  

    wx.showLoading({  
      title: '正在上传',  
    });  
    /* 所有图片上传完成后调用该方法 */  
    Promise.all(p_arr).then((res) => {  
      // 关闭加载提示  
      wx.hideLoading();  
      wx.showToast({  
        title: '上传成功',  
        icon: 'success'  
      })  
      // 输出已经上传完的图片地址，请查看控制台结果  
      console.log(res);  
    });  
  }  
})