【微信小程序】API之网络（二）上传数据

今天记录一下小程序上传数据的方法。

1.使用官方提供的接口wx.uploadFile(OBJECT)，将本地资源上传到开发者服务器，客户端发起一个HTTPS POST请求。参数说明如下。

参数	类型	必填	说明
url	String	是	开发者服务器 url
filePath	String	是	要上传文件资源的路径
name	String	是	文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
header	Object	否	HTTP 请求 Header, header 中不能设置 Referer
formData	Object	否	HTTP 请求中其他额外的 form data
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

（1）success返回参数说明

参数	类型	说明
data	String	开发者服务器返回的数据
statusCode	Number	开发者服务器返回的 HTTP 状态码

2.监听上传进度uploadTask对象方法列表

方法	参数	说明	最低版本
onProgressUpdate	callback	监听上传进度变化	1.4.0
abort		中断上传任务	1.4.0

（1）onProgressUpdate返回参数说明

参数	类型	说明
progress	Number	上传进度百分比
totalBytesSent	Number	已经上传的数据长度，单位 Bytes
totalBytesExpectedToSend	Number	预期需要上传的数据总长度，单位 Bytes

3.demo

（1）思路：我们首先使用wx.chooseImage接口获得若干个图片，对选取的图片通过wx.uploadFile进行上传操作。并且，使用uploadTask对上传的进度进行监听操作。

（2）简单看一下api.wxml，点击button进行选择图片并上传，选择图片后展示选择的图片临时路径（一或多个），最后一个text展示通过uploadTask获取的上传进度。

<!--pages/api/api.wxml-->
<view class="container wxml-container">
  <text class="topic-group">上传</text>
  <view style="margin:10rpx 10rpx" wx:for="{{picturePaths}}">{{item}}</view>
  <button class="button" bindtap="uploadToServer">选择图片并上传</button>
  <text class="topic-group" hidden='{{hidden}}'>上传进度</text>
  <text>{{progressInfo}}</text>
</view>

（3）看一下js文件，该文件中需定义uploadToServer函数。在该例中我们没有配套的服务器进行数据处理，因此上传不会成功。

// pages/api/api.js
Page({
  data: {
    picturePaths: [],
    progressInfo: "",
    hidden: true
  },

  uploadToServer: function () {
    var THIS = this;
    wx.chooseImage({//选择要被上传的图片
      success: function (res) {
        var tempFilePaths = res.tempFilePaths//选择成功后获取文件路径，是一个数组
        THIS.setData({
          picturePaths: tempFilePaths //界面上展示选择的图片的路径
        })
        const uploadTask = wx.uploadFile({//uploadTask监听上载进度
          url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
          filePath: tempFilePaths[0],//以上传第一个图片为例
          name: 'file',//上传文件的名字
          formData: {
            'user': 'test'
          },
          success: function (res) {
            var data = res.data
            console.log(data)//如果上传成功，打印data值
          },
          fail: function (errMsg) {
            console.log(errMsg)//上传失败，在控制台输出错误信息
          }
        })
        uploadTask.onProgressUpdate((res) => {
          var info = '上传进度' + res.progress +
            '\n已经上传的数据长度' + res.totalBytesSent +
            '\n预期需要上传的数据总长度' + res.totalBytesExpectedToSend
          THIS.setData({
            progressInfo: info,//在视图层展示上传的结果
            hidden: false//第二个小粉条的展示，可忽略
          })
        })
      }
    })
  }
})

（4）看一下效果图，上传进度的单位为Bytes。

（5）同时我们可以看到由上传失败，console输出的log日志。

就记录到这里了，午睡一会下午还要上课。忙碌的周一。吐舌头

【微信小程序】API之网络（二）上传数据

悦读