小程序怎么实现多图片上传

这篇文章主要介绍"小程序怎么实现多图片上传"，在日常操作中，相信很多人在小程序怎么实现多图片上传问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"小程序怎么实现多图片上传"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

小程序开发之变相实现多图片上传新手教程。开发中总会需要文件上传的功能(比如图片上传)，微信提供了wx.uploadFile(OBJECT)方法，用来将文件上传至服务器。

上传图片之前自然需要选择图片，小程序API -- wx.chooseImage(OBJECT)。就是从本地相册选择图片或者使用相机拍照。

OBJECT参数说明如下：

wx.chooseImage({　　count: 9, //最多可以选择的图片数，默认为9　　sizeType: ['orignal','compressed'], //original 原图，compressed 压缩图，默认二者都有　　sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有　　success: function(){}, //成功则返回图片的本地文件路径列表 tempFilePaths　　fail: function(){}, //接口调用失败的回调函数　　complete: function(){} //接口调用结束的回调函数（调用成功、失败都会执行）})

success返回参数： tempFilePaths: 图片的本地文件路径列表

wx.uploadFile(OBJECT)

wx.uploadFile({      url: 'https://example.weixin.qq.com/upload', //开发者服务器 url      filePath: tempFilePaths[0],//要上传文件资源的路径      name: 'file', //文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容      formData:{ //HTTP 请求中其他额外的 form data        'user': 'test'      },      success: function(res){        var data = res.data        //do something      }    })

在chooseImage回调函数里调用上传方法!

前久，做了一个如上图的图片上传功能!直接上代码吧：

/* 函数描述：作为上传文件时递归上传的函数体体；   * 参数描述：    * filePaths是文件路径数组   * successUp是成功上传的个数   * failUp是上传失败的个数   * i是文件路径数组的指标   * length是文件路径数组的长度   */          uploadDIY(filePaths,successUp,failUp,i,length){      var that = this;      app.toastShow(0,"图片上传中...",20000000,1);      wx.uploadFile({          url: '/uploadurl/',           filePath: filePaths[i],          name: 'file',          formData:{            'user': 'test'          },          success: (res) => {              successUp++;              var srcArr = that.data.src;              srcArr.push(filePaths[i]),              that.setData({                src : srcArr              });              var data = JSON.parse(res.data);              var newpicKeys = that.data.picKeys;              newpicKeys.push(data.data['pic_key']);              that.setData({                picKeys: newpicKeys              });          },          fail: (res) => {              that.setData({                isuploaderror: 1              });              failUp ++;          },          complete: () => {              i ++;                                      if(i == length){                wx.hideToast();                var txt = '总共'+successUp+'张上传成功,'+failUp+'张上传失败！';                app.toastShow(0,txt,2000,1);              }else{  //递归调用uploadDIY函数                  if(that.data.isuploaderror){                      app.toastShow(0,'图片上传失败，请重新选择上传',2000,1);                  }else{                      this.uploadDIY(filePaths,successUp,failUp,i,length);                  }              }          }      });  },  uploadImage:function(e){    var that = this;    that.setData({      isuploaderror: 0    });    var nowLen = that.data.src.length;    var remain = 9 - nowLen;    wx.chooseImage({        count: remain,        sizeType: ['original', 'compressed'],        sourceType: ['album', 'camera'],        success: (res) => {            var successUp = 0; //成功个数            var failUp = 0; //失败个数            var length = res.tempFilePaths.length; //总共个数            var i = 0; //第几个            this.uploadDIY(res.tempFilePaths,successUp,failUp,i,length);        },            });  }

因为wx.uploadFile只能单个文件上传，所以需要变相的实现多文件上传，即，complete回调里调用uploadDIY调用函数本身~ 直到i==length!

到此，关于"小程序怎么实现多图片上传"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！