微信小程序下载照片（显示进度条）
发布时间：2018-12-24 08:45 所属栏目：小程序开发教程
一、downloadTask/UploadTask理解
downloadTask
-
一个可以监听下载进度变化事件，以及取消下载任务的对象
- 本质：对象
- 功能一：监听下载进度变化
- 功能二：取消下载任务
UploadTask
-
一个可以监听上传进度变化事件，以及取消上传任务的对象
- 本质：对象
- 功能一：监听上传进度变化
- 功能二：取消上传任务
1.1、监听下载进度变化事件
downloadTask.onProgressUpdate((res) => {
console.log('下载进度', res.progress)
console.log('已经下载的数据长度', res.totalBytesWritten)
console.log('预期需要下载的数据总长度', res.totalBytesExpectedToWrite)
})
复制代码
|
1.2、取消监听下载进度变化事件
DownloadTask.offProgressUpdate(function callback) 复制代码
1.3、 监听 HTTP Response Header 事件
DownloadTask.onHeadersReceived(function callback) 复制代码
1.4、 取消监听 HTTP Response Header 事件
DownloadTask.offHeadersReceived(function callback) 复制代码
1.5、中断下载任务
DownloadTask.abort() 复制代码
二、downloadFile 下载文件理解
- 本质：方法
- 功能：下载文件资源到本地
- 返回值：downloadTask对象
success 返回的两个参数
-
tempFilePath
- 临时文件路径。
- 如果没传入 filePath 指定文件存储路径，则下载后的文件会存储到一个临时文件
- string
-
statusCode
- 开发者服务器返回的 HTTP 状态码
- number
wx.downloadFile({
url: 'https://example.com/audio/123',
header:'', //HTTP 请求的 Header，Header 中不能设置 Referer
filePath:'',//指定文件下载后存储的路径
success(res) {
// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调
//业务需要自行判断是否下载到了想要的内容
if (res.statusCode === 200) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath
})
}
},
fail(err){
console.log(err)
},
complete(res){
console.log(res)
}
})
|
三、saveImageToPhotosAlbum 理解
- 功能：保存图片到系统相册
wx.saveImageToPhotosAlbum({
filePath:'',
success(res) {
}，
fail(err){
},
complete(res){
}
})
|
四、代码展示
/**
* [downloadPhoto 下载照片]
*/
downloadPhoto (e) {
let imgUrl = e.currentTarget.dataset.src
// 下载监听进度
const downloadTask = wx.downloadFile({
url: imgUrl,
success: function (res) {
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 + '%'
})
}
})
},
|
