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