温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

小程序怎么实现下载图片并且显示进度的页面效果

发布时间:2022-03-10 10:06:55 来源:亿速云 阅读:247 作者:iii 栏目:开发技术

本篇内容介绍了“小程序怎么实现下载图片并且显示进度的页面效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

 图片效果

小程序怎么实现下载图片并且显示进度的页面效果

wxml

小程序怎么实现下载图片并且显示进度的页面效果

js

1 downImg: function(e) {2 var _this = this;34 // 获取图片地址(http://www.playsort.cn/...)5 var img = e.currentTarget.dataset.src;67 // 下载监听进度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 }

“小程序怎么实现下载图片并且显示进度的页面效果”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI