本篇文章以小程序中的代表【微信小程序】为例，分享一下在微信小程序中实现多图上传的源码实现。

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

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

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

源码：

const app = getApp()
 
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);
    });
  }
})