微信小程序下載照片（顯示進度條）
發(fā)布時間：2018-12-24 08:45 所屬欄目：小程序開發(fā)教程
一、downloadTask/UploadTask理解
downloadTask
-
一個可以監(jiān)聽下載進度變化事件，以及取消下載任務的對象
- 本質：對象
- 功能一：監(jiān)聽下載進度變化
- 功能二：取消下載任務
UploadTask
-
一個可以監(jiān)聽上傳進度變化事件，以及取消上傳任務的對象
- 本質：對象
- 功能一：監(jiān)聽上傳進度變化
- 功能二：取消上傳任務
1.1、監(jiān)聽下載進度變化事件
downloadTask.onProgressUpdate((res) => {
console.log('下載進度', res.progress)
console.log('已經(jīng)下載的數(shù)據(jù)長度', res.totalBytesWritten)
console.log('預期需要下載的數(shù)據(jù)總長度', res.totalBytesExpectedToWrite)
})
復制代碼
|
1.2、取消監(jiān)聽下載進度變化事件
DownloadTask.offProgressUpdate(function callback) 復制代碼
1.3、 監(jiān)聽 HTTP Response Header 事件
DownloadTask.onHeadersReceived(function callback) 復制代碼
1.4、 取消監(jiān)聽 HTTP Response Header 事件
DownloadTask.offHeadersReceived(function callback) 復制代碼
1.5、中斷下載任務
DownloadTask.abort() 復制代碼
二、downloadFile 下載文件理解
- 本質：方法
- 功能：下載文件資源到本地
- 返回值：downloadTask對象
success 返回的兩個參數(shù)
-
tempFilePath
- 臨時文件路徑。
- 如果沒傳入 filePath 指定文件存儲路徑，則下載后的文件會存儲到一個臨時文件
- string
-
statusCode
- 開發(fā)者服務器返回的 HTTP 狀態(tài)碼
- number
wx.downloadFile({
url: 'https://example.com/audio/123',
header:'', //HTTP 請求的 Header，Header 中不能設置 Referer
filePath:'',//指定文件下載后存儲的路徑
success(res) {
// 只要服務器有響應數(shù)據(jù)，就會把響應內(nèi)容寫入文件并進入 success 回調
//業(yè)務需要自行判斷是否下載到了想要的內(nèi)容
if (res.statusCode === 200) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath
})
}
},
fail(err){
console.log(err)
},
complete(res){
console.log(res)
}
})
|
三、saveImageToPhotosAlbum 理解
- 功能：保存圖片到系統(tǒng)相冊
wx.saveImageToPhotosAlbum({
filePath:'',
success(res) {
}，
fail(err){
},
complete(res){
}
})
|
四、代碼展示
/**
* [downloadPhoto 下載照片]
*/
downloadPhoto (e) {
let imgUrl = e.currentTarget.dataset.src
// 下載監(jiān)聽進度
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 + '%'
})
}
})
},
|
