微信小程序下載照片（顯示進度條）
發布時間：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 + '%'
})
}
})
},
|
