Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to upload multiple pictures on Mini Program". In daily operation, I believe many people have doubts about how to upload multiple pictures on Mini Program. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about "how to upload multiple pictures on Mini Program". Next, please follow the editor to study!

Mini Program development in disguise to achieve multiple pictures upload novice tutorials. The function of uploading files (such as pictures) is always needed in development. Wechat provides a wx.uploadFile (OBJECT) method for uploading files to the server.

Naturally, you need to select a picture before uploading a picture. Mini Program API-- wx.chooseImage (OBJECT). Is to select pictures from local albums or take pictures with a camera.

The OBJECT parameters are described as follows:

Wx.chooseImage ({count: 9, / / the maximum number of images that can be selected. Default is 9 sizeType: ['orignal','compressed'], / / original original image, compressed compressed image. By default, both have sourceType: [' album', 'camera'], / / album selects images from photo albums, and camera uses camera). By default, both have success: function () {}, and / / returns the local file path list of the image tempFilePaths fail: function () {}, / / callback function complete: function () {} / / the callback function that the API call ends (both successful and failed calls will be executed)

Success returns parameter: tempFilePaths: list of local file paths of the image

Wx.uploadFile (OBJECT)

Wx.uploadFile ({url: 'https://example.weixin.qq.com/upload', / / developer server url filePath: tempFilePaths [0], / / the path to upload the file resource name:' file', / / the key of the file Developers can get the binary content of the file formData: {/ / HTTP request other form data 'user':' test'}, success: function (res) {var data = res.data / / do something}}) on the server side through this key

Call the upload method in the chooseImage callback function!

A long time ago, I made a picture upload function such as the picture above! Go straight to the code:

/ * function description: as a function body for recursive upload when uploading a file * Parameter description: * filePaths is an array of file paths * successUp is the number of successful uploads * failUp is the number of failed uploads * I is the indicator of the array of file paths * length is the length of the array of file paths * / uploadDIY (filePaths,successUp,failUp,i,length) {var that = this; app.toastShow (0, "Picture upload.", 200000001) 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 = 'Total' + successUp+' Zhang upload successfully,'+ failUp+' Zhang upload failed!' ; app.toastShow (0rect txtje 2000 app.toastShow 1);} else {/ / Recursive call to uploadDIY function if (that.data.isuploaderror) {app.toastShow (0jie 'image upload failed, please re-select upload', 2000 dint 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; / / number of successes var failUp = 0; / / number of failures var length = res.tempFilePaths.length; / / total number of var I = 0 / / this.uploadDIY (res.tempFilePaths,successUp,failUp,i,length);},});}

Because wx.uploadFile can only upload a single file, you need to upload multiple files in disguise, that is, call uploadDIY in the complete callback and call the function itself until i==length!

At this point, the study of "how to upload multiple pictures on Mini Program" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.