小程序 - 详解下载功能加图片下载并显示进度
【摘要】 注:文件的临时路径,在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 [wx.saveFile](https://developers.weixin.qq.com/miniprogram/dev/api/wx.saveFile.html),才能在小程序下次启动时访问得到。
技术文档
下载文件资源到本地,客户端直接发起一个 HTTP GET 请求,返回文件的本地临时路径。使用前请先阅读官方说明
注:文件的临时路径,在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 wx.saveFile,才能在小程序下次启动时访问得到。
例子
wxml
downImg: function(e) {
var _this = this;
// 获取图片地址(http://www.playsort.cn/...)
var img = e.currentTarget.dataset.src;
// 下载监听进度
const downloadTask = wx.downloadFile({
url: img,
success: function(res) {
// 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容
console.log(res)
if (res.statusCode == 200) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function(res) {
wx.showToast({
title: '保存图片成功!~',
});
},
fail: function(res) {
wx.showToast({
title: '保存图片失败!~',
});
}
})
} }
});
downloadTask.onProgressUpdate((res) => {
if (res.progress === 100) {
this.setData({
progress: ''
});
} else {
this.setData({
progress: res.progress + '%'
});
}
});
}
```
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)