小程序开发API之wx.uploadFile、UploadTask监听上传事件及取消上传任务的对象

wx.uploadFile(Object object)

将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data

wx.uploadFile参数

Object res参数

例如

/*
  url    开发者服务器地址
  filePath   要上传文件资源的路径
  name   文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容
  header   HTTP 请求 Header，Header 中不能设置 Referer
  formData   HTTP 请求中其他额外的 form data
*/
Page({
  data: {
    
  },
  onLoad: function (options) {
    //待上传的文件
    const tempFilePaths = options.tempFilePaths
    wx.downloadFile({
      url: 'https://example.weixin.qq.com/upload', 
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        user: 'test'
      },
      success(res) {
        console.log('上传成功:', res.data)
        console.log('状态码:', res.statusCode)
      },
      fail(err){
        console.log('上传失败:',err)
      }
    })
  }
})

UploadTask

一个可以监听上传进度变化事件，以及取消上传任务的对象

方法

UploadTask.abort()

中断上传任务

UploadTask.onProgressUpdate(function callback)

监听上传进度变化事件

UploadTask.offProgressUpdate(function callback)

取消监听上传进度变化事件

UploadTask.onHeadersReceived(function callback)

监听 HTTP Response Header 事件。会比请求完成事件更早
Object res属性

UploadTask.offHeadersReceived(function callback)

取消监听 HTTP Response Header 事件
Object res属性

例如
index.wxml

<button bindtap='btnClick1' type="primary">上传进度</button>
<button bindtap='btnClick2' type="primary">取消上传任务</button>

index.js

/*
  url    开发者服务器地址
  filePath   要上传文件资源的路径
  name   文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容
  header   HTTP 请求 Header，Header 中不能设置 Referer
  formData   HTTP 请求中其他额外的 form data
*/
Page({
  data: {
    
  },
  onLoad: function (options) {
    //待上传的文件
    const tempFilePaths = options.tempFilePaths
    const uploadTask = wx.downloadFile({
      url: 'https://example.weixin.qq.com/upload', 
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        user: 'test'
      },
      success(res) {
        console.log('上传成功:', res.data)
        console.log('状态码:', res.statusCode)
      },
      fail(err){
        console.log('上传失败:',err)
      }
    })
  },
  btnClick1:function(){
    uploadTask.onProgressUpdate((res) => {
      console.log('上传进度', res.progress)
      console.log('已经上传的数据长度', res.totalBytesSent)
      console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
    })
  },
  btnClick2: function () {
    uploadTask.abort() // 取消上传任务
  }
})