WeChat applet development combat (22): upload files and download files

1. Upload files

Use the wx.uploadFile method to upload files to the specified Url. This method has only one parameter of type Object, and the description of the parameter properties of type Object is shown below.

• url: String type, required, server Url used to upload files

• filePath: String type, required, the local path of the file resource to be uploaded

• name: String type, required, the key corresponding to the file, the developer can obtain the binary content of the file through this key on the server side

• header: Object type, optional, HTTPS request Header, Referer cannot be set

• formData: Object type, optional, other additional form data in HTTPS request

• success: Function type, optional, callback function for successful interface call

• fail: Function type, optional, callback function for interface call failure

• complete: Function type, optional, the callback function for the end of the interface call (the call will be executed if it succeeds or fails)

To test the wx.uploadFile method, you also need to find an https link. If not, you can use https://www.baidu.com. Although the link will not actually receive the uploaded file, it will let the wx.uploadFile method execute normally for testing purposes. The callback function.

The following code pops up an image selection dialog box through the wx.chooseImage method. After selecting the image file, it will call the wx.uploadFile method to upload the file to the server. If the upload is successful, the success function will be called and the response data will be output.

wx.chooseImage({
  success: function(res) {
    var tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'https://www.baidu.com',
      filePath: tempFilePaths[0],
      name: 'file',
      formData:{
        'user': 'Bill'
      },
      success: function(res){
        var data = res.data
       console.log(data);
      }
    })
  }
})

 

2. Download the file

Use the wx.downloadFile method to download a file to a temporary path. This method has an Object type parameter. The description of the Object type parameter properties is shown below.

• url: String type, required, the URL of the download resource

• header: Object type, optional, HTTPS request Header

• success: Function type, optional. After the download is successful, it will be sent to the page in the form of tempFilePath, res = {tempFilePath:'The temporary path of the file'}

• fail: Function type, optional, callback function for interface call failure

• complete: Function type, optional, the callback function for the end of the interface call (the call will be executed if it succeeds or fails)

Similarly, using the wx.downloadFile method, you must also download the resources specified by the HTTPS Url. For example, the following code will download the Baidu homepage.

wx.downloadFile({
  url: 'https://www.baidu.com',
  success: function(res) {
      //  输出下载资源存储的临时文件名
      console.log( res.tempFilePath);
  }
})

The downloaded resource will be saved as a temporary file. We can obtain the temporary file name through res.tempFilePath and do further processing. For example, if the download is a video file, you can use the wx.playVoice method to play it.

After executing this code, you will see the temporary file name shown in Figure 1 output in the Console.

Figure 1 Temporary files for downloading resources

If you are interested in this article, you can add teacher Li Ning's WeChat public account (unitymarvel):

Follow the "Geek Origin" official account to get more free technical videos and articles.