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

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

PS：其它小程序 和 uni-app 也可通用该思路实现。

---

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

---

本篇文章后面会对这两种方式的优缺点分析说明，让大家更好的选择使用合适的实现方式。

JS源码：

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);
    });
  }
})

方法优缺点说明：

---

uploadCallback 方法

优点：

1. 多图以队列形式按序提交，能很好的把握图片上传情况（比如：1.有个需求是要提示已经上传多少张，总共多少张。2.若因用户权限问题无法提交，在上传第一张图片时则已经知道）
2. 相对减少服务器压力

缺点：全部上传完成所需时长相对较长

---

uploadPromise 方法

优点：全部上传完成所需时长相对较短

缺点：

1. 多个请求同时发出，若服务器处理能力不足，会造成服务器并发问题导致崩溃。若是第三方服务器有可能被视为恶意请求而拦截；
2. 对于有上传进度这种需求的情况下点难以处理。还有在上传错误时造成多次无效请求。（假设有100张图片，上传第一张时已经提示登录的帐号有问题，但还是会发出剩下的99次请求，接口返回的结果都是一样的失败）；

 

相信有一部分读者是通过 循环 上传来完成的，循环 的方式 与 uploadPromise 方法 的方式又有什么区别呢？

1. 循环的方式 判断是否已经全部上传完成的便利性上不如 uploadPromise 方法 的方式
2. 循环的方式 产生的结果 与 未上传前的数据排序不统一。（实际中图片的大小不一致，后上传的图片可能会比先上传的完成的更快）。

结合以上两点区别，小编放弃使用 循环 的方式实现 多图上传的功能。

---

愿本篇文章对大家有所帮助！

作者：黄河爱浪 QQ：1846492969，邮箱：[email protected]

微信公众号：web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。

更多精彩文章，请扫下方二维码关注我的公众号