Implementation of multiple picture upload function in WeChat applet-Mini Program Development-php.cn

Home

WeChat Applet

Mini Program Development

Implementation of multiple picture upload function in WeChat applet

不言

Jun 23, 2018 am 11:49 AM

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 like this:

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 the image and then upload the first image among the selected images. ;

Now let’s write 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 and introduce it later. You can also write it in a JS file and introduce it 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

Multiple pictures The method for uploading images has been written, and here is the quote:

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

Completed.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to obtain the user’s mobile phone number through the WeChat applet

About WeChat applet uploading pictures to the server Code

The above is the detailed content of Implementation of multiple picture upload function in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn