用户登录

上传文件的时候,我打算显示一个文件上传的进度 .. wx.uploadFile 这个接口会返回上传任务 .. 起个名字,可以是 uploadTask ..

这个上传任务有两个方法,一个是 onProgressUpdate,它会监视上传的变化 .. 还有一个是 abort ,它可以取消上传任务 ..

我们用一下 uploadTask 下面的 onProgressUpdate .. 给这个方法一个函数参数 .. 响应的东西可以用 response 表示 ..

这个 response 里面有一些有用的属性,比如表示上传进度的百分比,上传了多少数据,一共要上传多少数据等等 ..

progress

先在页面的数据里,添加一个 progress,用它表示文件上传的进度 .. 它的值应该是一个数组,因为可以需要上传多个文件 ..

然后在这个 map 方法里,再添加一个 index,表示索引 ..

在找到 onProgressUpdate .. this.data.progress[index],设置一下 progress 数据里面的某个项目的值 .. 让它等于 response 下面的 progress 这个属性的值 .. 这个属性的值就是文件上传的百分比 ..

下面再用一下 this 的 setData .. 要设置的是 progress ,对应的值是 this.data.progress .. 因为我要实时的在页面上显示这个进度的变化 ..

视图

打开页面的视图 .. 在这个 image 组件里面,再包装一个 progress 组件,它可以显示进度 .. 一个 percent 属性 .. 绑定输出一个 progress 下面的对应的项目 ..

回到开发者工具,可以去测试一下 ...

选择几个图像文件 ... 现在上传的时候会在图像的下面显示一个上传的进度 ...

显示文件上传进度《 微信小程序:接口 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点