Example code for implementing multiple image uploads in WeChat mini program-JS Tutorial-php.cn

Example code for implementing multiple image uploads in WeChat mini program

零下一度

Release： 2018-05-17 15:31:41

Original

3121 people have browsed it

This article mainly introduces the function of uploading multiple pictures in WeChat applet in detail, which has certain reference value. Interested friends can refer to it

WeChat applet uploads pictures every time You can only upload one picture, so many friends will ask what should I do if I want to upload multiple pictures?

First, let’s take a look at the two APIs wx.chooseImage(object) and wx.uploadFile(OBJECT)

The sample code is as follows:

wx.chooseImage({
 success: function(res) {
  var tempFilePaths = res.tempFilePaths
  wx.uploadFile({
   url: &#39;http://example.weixin.qq.com/upload&#39;, //仅为示例，非真实的接口地址
   filePath: tempFilePaths[0],
   name: &#39;file&#39;,
   formData:{
    &#39;user&#39;: &#39;test&#39;
   },
   success: function(res){
    var data = res.data
    //do something
   }
  })
 }
})

Copy after login

The sample code here is to select a picture and then upload the first picture among the selected pictures;

Now start writing an example of uploading multiple pictures

First of all, we still have to select the picture

wx.chooseImage({
 success: function(res) {
  var tempFilePaths = res.tempFilePaths;//这里是选好的图片的地址，是一个数组
  
 }
})

Copy after login

Then write a method to upload multiple pictures in app.js, which will be introduced later. You can also It can be written in a JS file and introduced later:

  //多张图片上传
  function uploadimg(data){
   var that=this,
     i=data.i?data.i:0,
     success=data.success?data.success:0,
     fail=data.fail?data.fail:0;
   wx.uploadFile({
      url: data.url, 
      filePath: data.path[i],
      name: &#39;fileData&#39;,
      formData:null,
      success: (resp) => {
        success++;
        console.log(resp)
        console.log(i);
        //这里可能有BUG，失败也会执行这里
      },
      fail: (res) => {
        fail++;
        console.log(&#39;fail:&#39;+i+"fail:"+fail);
      },
      complete: () => {
        console.log(i);
        i++;
      if(i==data.path.length){  //当图片传完时，停止调用     
        console.log(&#39;执行完毕&#39;);
        console.log(&#39;成功：&#39;+success+" 失败："+fail);
      }else{//若图片还没有传完，则继续调用函数
        console.log(i);
        data.i=i;
        data.success=success;
        data.fail=fail;
        that.uploadimg(data);
      }
        
      }
    });
  }

Copy after login

The method of uploading multiple pictures has been written, and the following is Quotation:

var app=getApp();
Page({
  data:{
   pics:[]
  },
  choose:function(){//这里是选取图片的方法
   var that=this;
   wx.chooseImage({
      count: 9-pic.length, // 最多可以选择的图片张数，默认9
      sizeType: [&#39;original&#39;, &#39;compressed&#39;], // original 原图，compressed 压缩图，默认二者都有
      sourceType: [&#39;album&#39;, &#39;camera&#39;], // album 从相册选图，camera 使用相机，默认二者都有
      success: function(res){
      var imgsrc=res.tempFilePaths;  
      that.setData({
        pics:imgsrc
      });
   },
   fail: function() {
    // fail
   },
   complete: function() {
    // complete
   }
  })

  },
  uploadimg:function(){//这里触发图片上传的方法
    var pics=this.data.pics;
    app.uploadimg({
      url:&#39;https://........&#39;,//这里是你图片上传的接口
      path:pics//这里是选取的图片的地址数组
    });
 },
  onLoad:function(options){

 }

})

Copy after login

The above is the detailed content of Example code for implementing multiple image uploads in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!