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

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

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

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

（1）success返回参数说明

参数类型说明dataString开发者服务器返回的数据statusCodeNumber开发者服务器返回的 HTTP 状态码

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

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

（1）onProgressUpdate返回参数说明

参数类型说明progressNumber上传进度百分比totalBytesSentNumber已经上传的数据长度，单位 BytestotalBytesExpectedToSendNumber预期需要上传的数据总长度，单位 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.jsPage({  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日志。

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