小程序页面效果 - 下载图片并且显示进度

1 downImg: function(e) {
2 var _this = this;
3
4 // 获取图片地址(http://www.playsort.cn/...)
5 var img = e.currentTarget.dataset.src;
6
7 // 下载监听进度
8 const downloadTask = wx.downloadFile({
9 url: img,
10 success: function(res) {
11 // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
12 console.log(res)
13 if (res.statusCode === 200) {
14 wx.saveImageToPhotosAlbum({
15 filePath: res.tempFilePath,
16 success: function(res) {
17 wx.showToast({
18 title: '保存图片成功!~',
19 });
20 },
21 fail: function(res) {
22 wx.showToast({
23 title: '保存图片失败!~',
24 });
25 }
26 })
27 }
28 }
29 });
30 downloadTask.onProgressUpdate((res) => {
31 if (res.progress === 100) {
32 this.setData({
33 progress: ''
34 });
35 } else {
36 this.setData({
37 progress: res.progress + '%'
38 });
39 }
40 });
41 }