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

比眉伴天荒 2023-07-05 13:20 15阅读 0赞

> 本篇文章以小程序中的代表【微信小程序】为例，分享一下在微信小程序中实现多图上传的源码实现。
> 
> PS：其它小程序 和 uni-app 也可通用该思路实现。

--------------------

代码片段（可导入微信WEB开发者工具体验）：[https://developers.weixin.qq.com/s/DHrt69mk7af3][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.  循环的方式 产生的结果 与 未上传前的数据排序不统一。（实际中图片的大小不一致，后上传的图片可能会比先上传的完成的更快）。

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

--------------------

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

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 微信公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[https_developers.weixin.qq.com_s_DHrt69mk7af3]: https://developers.weixin.qq.com/s/DHrt69mk7af3
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: https://img-blog.csdnimg.cn/20190512094840637.jpg

发表评论取消回复

表情：

评论列表（有 0 条评论，15人围观）

还没有评论，来说两句吧...

相关阅读

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

> 本篇文章以小程序中的代表【微信小程序】为例，分享一下在微信小程序中实现多图上传的源码实现。 > > PS：其它小程序和 uni-app 也可通用该思路实现。 ----

比眉伴天荒/ 2023年07月05日 13:20/ 0 赞/ 16 阅读

相关微信小程序杂技之--上传一张或者多张图片

首先我们先有一个存放图片的数组这里我们用 imgList data:{ imgList:[] } chooseIm

亦凉/ 2023年02月26日 02:17/ 0 赞/ 23 阅读

相关微信小程序实现上传多张图片，删除图片

最近在做微信小程序，遇到上传多张图片到服务器，计算上传图片的张数，并且可以手动删除图片，下面是效果图效果图： ![20200609145904640.png][] 本

Bertha 。/ 2023年02月16日 09:25/ 0 赞/ 172 阅读

相关服务器怎么接收多张微信小程序上传的图片,微信小程序实现同时上传多张图片...

本文实例为大家分享了微信小程序实现同时上传多张图片的具体代码，供大家参考，具体内容如下 1.图片选择后，路径已经存入list中： data: \{ images: \[\

男娘i/ 2022年09月03日 14:14/ 0 赞/ 184 阅读

相关 vue上传多张图片

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWd

我会带着你远行/ 2022年06月08日 11:56/ 0 赞/ 365 阅读

相关 springmvc上传多张图片

在pom.xml中加入 <dependency> <groupId>commons-fileupload</groupId>

小咪咪/ 2022年06月07日 12:36/ 0 赞/ 278 阅读

相关 node+ajax实现多张图片上传

前台代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit

港控/mmm°/ 2022年05月29日 08:24/ 0 赞/ 354 阅读

相关微信小程序实现多张图片上传

//app.js uploadimg(data) { var that = this, i = data.i ? data.i

た入场券/ 2021年07月24日 23:15/ 0 赞/ 580 阅读

相关微信小程序单张本地图片上传，拍摄图片上传

wxml <button bindtap="upimg" class='jia_img' >上传</button> <image src="{

阳光穿透心脏的1/2处/ 2021年07月24日 17:20/ 0 赞/ 624 阅读

相关 FileReader上传多张图片

使用Promise实现同步处理 <div> <input type="file" accept="image/" @change="setImage

客官°小女子只卖身不卖艺/ 2021年06月24日 16:10/ 0 赞/ 659 阅读