#Applet ා image upload

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

wx.chooseImage({
  success (res) {
    const tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload ', / / only an example, not a real interface address
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        'user': 'test'
      },
      success (res){
        const data = res.data
        //do something
      }
    })
  }
})

The example code here is to select a picture, and then upload the first picture in the selected picture;

Upload multiple:

Choose a picture first

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 can be introduced later, or you can write it in a JS file, which can be introduced later:

//Upload multiple pictures
    function uploadimg(data){
     var that=this,
         i=data.i?data.i:0,//Which picture is currently Uploaded
         success=data.success?data.success:0,//Number of successful uploads
         fail=data.fail?data.fail:0;//Number of upload failures
      wx.uploadFile({
            url: data.url, 
            filePath: data.path[i],
            name: 'file',//Here, we will change it according to our own actual situation
            formData:null,//Here is the data uploaded together with the picture
            success: (resp) => {
               success++;//Variables + 1 for successful image upload
               console.log(resp)
                console.log(i);
                //There may be bugs here, and failures will also be executed here, so here it should be when the status code returned from the background is success, and the success here is + 1
            },
            fail: (res) => {
                fail++;//Variable + 1 for image upload failure and image upload failure
                console.log('fail:'+i+"fail:"+fail);
            },
            complete: () => {
                console.log(i);
                i++;//After this image is uploaded, start to upload the next one
            if(i==data.path.length){   //Stop calling when the picture is transferred          
                console.log('completion of enforcement');
                console.log('Success:'+success+" Failure:"+fail);
            }else{//If the picture is not finished, continue to call the function
                console.log(i);
                data.i=i;
                data.success=success;
                data.fail=fail;
                that.uploadimg(data);
            }
                
            }
        });
    }

The method of uploading multiple pictures has been written. Here is the reference:

var app=getApp();
Page({
   data:{
      pics:[]
   },
   choose:function(){//Here's how to select pictures
      var that=this,
      pics=this.data.pics;

      wx.chooseImage({
           count: 9-pics.length, // The maximum number of pictures that can be selected, 9 by default
           sizeType: ['original', 'compressed'], // original, compressed, both by default
           sourceType: ['album', 'camera'], // Album selects pictures from album, camera uses camera, both of which are available by default
           success: function(res){
           var imgsrc=res.tempFilePaths; 
         pics=pics.concat(imgsrc);  
            that.setData({
                pics:pics
            });
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })

   },
   uploadimg:function(){//Here's how to trigger 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 picture
        });
  },
   onLoad:function(options){

  }

})

 

 

 

 

Added by Robert Elsdon on Wed, 25 Dec 2019 23:07:16 +0200