微信小程序API之网络(二)上传数据
2017-10-23 09:38
218 查看
今天记录一下小程序上传数据的方法。
1.使用官方提供的接口wx.uploadFile(OBJECT),将本地资源上传到开发者服务器,客户端发起一个HTTPS POST请求。参数说明如下。
(1)success返回参数说明
2.监听上传进度uploadTask对象方法列表
(1)onProgressUpdate返回参数说明
3.demo
(1)思路:我们首先使用wx.chooseImage接口获得若干个图片,对选取的图片通过wx.uploadFile进行上传操作。并且,使用uploadTask对上传的进度进行监听操作。
(2)简单看一下api.wxml,点击button进行选择图片并上传,选择图片后展示选择的图片临时路径(一或多个),最后一个text展示通过uploadTask获取的上传进度。
(3)看一下js文件,该文件中需定义uploadToServer函数。在该例中我们没有配套的服务器进行数据处理,因此上传不会成功。
(4)看一下效果图,上传进度的单位为Bytes。
(5)同时我们可以看到由上传失败,console输出的log日志。
就记录到这里了,午睡一会下午还要上课。忙碌的周一。
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 | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
参数 | 类型 | 说明 |
---|---|---|
data | String | 开发者服务器返回的数据 |
statusCode | Number | 开发者服务器返回的 HTTP 状态码 |
方法 | 参数 | 说明 | 最低版本 |
---|---|---|---|
onProgressUpdate | callback | 监听上传进度变化 | 1.4.0 |
abort | 中断上传任务 | 1.4.0 |
参数 | 类型 | 说明 |
---|---|---|
progress | Number | 上传进度百分比 |
totalBytesSent | Number | 已经上传的数据长度,单位 Bytes |
totalBytesExpectedToSend | Number | 预期需要上传的数据总长度,单位 Bytes |
(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之网络(三)下载数据
- 微信小程序 网络API 上传、下载详解
- 微信小程序服务器请求和上传数据,上传图片并展示,提交表单完整实例代码附效果图
- Process Monitor监测记录表明,QQ不仅会自动访问许多与聊天无关的程序和文档,例如“我的文档”等敏感位置,测试当天的上网记录也没能幸免。随后,QQ还会产生大量网络通讯,很可能是将数据上传到腾讯服务器。短短10分钟内,它访问的无关
- 微信小程序教学第二章(含视频):小程序中级实战教程之预备篇 - 封装网络请求及 mock 数据
- 微信的API都是通过https调用实现的,分为post方法调用和get方法调用。不需要上传数据的采用get方法(使用IntraWeb开发)
- 第三篇、微信小程序-网络请求API
- 微信小程序API之网络(一)发起请求
- 微信小程序数据缓存API整理
- 微信小程序 5 网络api
- 微信小程序 网络请求API详解
- 微信小程序教学第二章(含视频):小程序中级实战教程之预备篇 - 封装网络请求及 mock 数据
- 微信小程序API之网络(四)WebSocket
- 微信小程序 网络API Websocket详解
- 微信小程序请求网络API 400错误的解决方法
- 微信小程序开发之本地图片上传(leancloud)
- 微信小程序开发之网络请求(POST请求)
- 微信小程序网络请求代码片段
- Android利用Fiddler进行网络数据抓包【怎么跟踪微信请求】