1, the preface

Recently in writing a small program, using the wx. UploadFile method, found that this method does not support the simultaneous upload of multiple files, so I wrote a upload multiple methods.

2, the demand for

Bloggers do user complaints page; The requirement is that the user uploads a maximum of three pictures, and finally submits the pictures and text together with user information to the server;

3. Solutions

The blogger’s solution is to define a recursive function that recursively calls wx.uploadFile to upload, and ends recursion when all is done.

4. Code presentation

The data in this.data

/** * initial data for the page */
data: {
 imgs: [].// Upload a list of images
 imgPath: [].// Successfully uploaded image path
},
Copy the code

Upload image code

// Upload a photo
chooseImg (e) {
  const _this = this;
  let imgs = this.data.imgs;
  let imgNumber = this.data.imgs.length;// The number of images uploaded
  if(imgNumber >= 3){
    FN.Toast("Exceeded number of uploads");
    return false;
  }else{
    imgNumber = 3 - imgNumber;
  };
  wx.chooseImage({// Open the local album and select the image
    count: imgNumber,
    sizeType: ['original'.'compressed'].sourceType: ['album'.'camera'],
    success (res) {
      const tempFilePaths = res.tempFilePaths;
      for(let i = 0; i < tempFilePaths.length; i++){ imgs.push(tempFilePaths[i]); } _this.setData({// Assign a value to echo the photo
        imgs: imgs
      });
      let successUp = 0; / / success
      let failUp = 0; / / fail
      let count = 0; / / how many copies
      let length = tempFilePaths.length; / / the total number of
      _this.recursionUploading(tempFilePaths, successUp, failUp, count, length);// Call the upload method}})},Copy the code

Recursive upload method

// Upload images recursively
recursionUploading(imgPaths, successUp, failUp, count, length){
  var _this = this;
  wx.showLoading({
  title: 'Uploading the first' + count + '张'}); wx.uploadFile({url: `${app.globalData.baseURL}/ API interface address '.filePath: imgPaths[count],
    formData: {userId:app.globalData.userMsg.userId
    },
    name: "uploadImage".header: {
      'content-type': 'multipart/form-data'
    }, 
    success (e) {
      console.log(e)
      let path = _this.data.imgPath;
      let obj = e.data;
      if(obj.status === "y"){
        path.push(obj.infoObject);
        _this.setData({
          imgPath:path
        });
      }
      successUp++;/ / success + 1
    },
    fail (e) {
      failUp++;/ / + 1 failure
    },
    complete (e) {
      count++;/ / the next
      if(count == length){
      	FN.Toast('Upload successful${successUp}`)}else{
        // Recursive call, upload the next one_this.recursionUploading(imgPaths, successUp, failUp, count, length); }}})},Copy the code

A larger preview

// Preview the larger image
lookBigImg (e) {
  let index = e.currentTarget.dataset.index;/ / index
  let big = this.data.imgs[index];
  wx.previewImage({
    current: big, // HTTP link for the current display image
    urls: this.data.imgs // List of HTTP links for images to preview})},Copy the code

If you think it is helpful, I am @pengduo, welcome to like and follow the comments; END

The articles

  • Simple JS+CSS web page custom skin
  • DataUrl is converted to File and URL to base64
  • Wechat apPLETS API interaction custom encapsulation

Personal home page

  • CSDN
  • GitHub
  • Jane’s book
  • Blog garden
  • The Denver nuggets