The WeChat applet uploads multiple images, while the applet uploads multiple images

Upload multiple images in the applet and multiple images in the Applet

The applet can only upload one image at a time. Many friends will ask what if they want to upload multiple images?

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

The sample code is as follows:

Wx. chooseImage ({success: function (res) {var tempFilePaths = res. tempFilePaths wx. uploadFile ({url: 'http: // example.weixin.qq.com/upload', // only for example. The non-real interface address is filePath: tempFilePaths [0], name: 'file', formData: {'user': 'test'}, success: function (res) {var data = res. data // do something }})}})

The sample code here is to select an image and then upload the first image in the selected image;

Now, let's start writing multiple image uploads.

First, we need to select an image.

Wx. chooseImage ({success: function (res) {var tempFilePaths = res. tempFilePaths; // here is the address of the selected image, which is an array }})

Then, write a method for uploading multiple images in app. js, which will be introduced later. You can also write it in a JS file, followed:

// Upload multiple images 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: 'filedata', formData: null, success: (resp) =>{ success ++; console. log (resp) console. log (I); // there may be a BUG, and the failure will also be executed here}, fail: (res) =>{ fail ++; console. log ('fail: '+ I + "fail:" + fail) ;}, complete: () =>{ console. log (I); I ++; if (I = data. path. length) {// when the image is uploaded, stop calling the console. log ('execution completed '); console. log ('success: '+ success + "failed:" + fail);} else {// if the image has not been uploaded, continue to call the function console. log (I); data. I = I; data. success = success; data. fail = fail; that. uploadimg (data );}}});}

The method for uploading multiple images has been written. The following is a reference:

Var app = getApp (); Page ({data: {pics: []}, choose: function () {// The method var that = this; wx. chooseImage ({count: 9-pic.length, // maximum number of images that can be selected. The default value is 9 sizeType: ['original', 'compressed '], // original Source image, compressed compression image, both have sourceType by default: ['alipay', 'camera '], // select a picture from the album with album. camera uses the camera, and both have success: function (res) by default) {var imgsrc = res. tempFilePaths; that. setData ({pics: imgsrc}) ;}, fail: function () {// fail}, complete: function () {// complete }}, uploadimg: function () {// Method for triggering Image Upload var pics = this. data. pics; app. uploadimg ({url: 'https ://........ ', // here is your image upload interface path: pics // here is the address array of the selected image}) ;}, onLoad: function (options ){}})

End.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.