小程式下載圖片、檔案、wx.downloadFile,廢話少說直接上程式碼
阿新 • • 發佈:2019-01-06
官方開發文件 wx.downloadFile(OBJECT)
下載檔案資源到本地,客戶端直接發起一個 HTTP GET 請求,返回檔案的本地臨時路徑。使用前請先閱讀說明。
OBJECT引數說明:
引數 | 型別 | 必填 | 必填 |
---|---|---|---|
url | String | 是 | 下載資源的 url |
header | Object | 否 | HTTP 請求 Header,header 中不能設定 Referer |
success | Function | 否 | 下載成功後以 tempFilePath 的形式傳給頁面,res = {tempFilePath: '檔案的臨時路徑'} |
fail | Function | 否 | 介面呼叫失敗的回撥函式 |
complete | Function | 否 | 介面呼叫結束的回撥函式(呼叫成功、失敗都會執行) |
注:檔案的臨時路徑,在小程式本次啟動期間可以正常使用,如需持久儲存,需在主動呼叫 wx.saveFile,才能在小程式下次啟動時訪問得到。
success返回引數說明:
引數 | 型別 | 說明 |
---|---|---|
tempFilePath | String | 臨時檔案路徑,下載後的檔案會儲存到一個臨時檔案 |
statusCode | Number | 開發者伺服器返回的 HTTP 狀態碼 |
返回值:
基礎庫 1.4.0 開始支援,低版本需做相容處理
返回一個 downloadTask
物件,通過 downloadTask
,可監聽下載進度變化事件,以及取消下載任務。
downloadTask
downloadTask 物件的方法列表:
方法 | 引數 | 說明 | 最低版本 |
---|---|---|---|
onProgressUpdate | callback | 監聽下載進度變化 | 1.4.0 |
abort | 中斷下載任務 | 1.4.0 |
onProgressUpdate 返回引數說明:
引數 | 型別 | 說明 |
---|---|---|
progress | Number | 下載進度百分比 |
totalBytesWritten | Number | 已經下載的資料長度,單位 Bytes |
totalBytesExpectedToWrite | Number | 預期需要下載的資料總長度,單位 Bytes |
wxml:
<button bindtap='down_file'>下載</button>//用來觸發下載函式的按鈕 <view><image src='{{img_l}}' bindtap='preview_img'></image></view>
下載的資源在伺服器中支援:
page({
data:{
img_l:''
},
preview_img:function(){//圖片預覽函式
wx.previewImage({
current: this.data.img_l, // 當前顯示圖片的http連結
urls: this.data.img_l // 需要預覽的圖片http連結列表
})
},
down_file:function(){
var _this = this;
const downloadTask=wx.downloadFile({
url: 'http://127.0.0.1/m_pro/min_img/1517295297785-2018-01-30.jpg', //僅為示例,並非真實的資源
success: function (res) {
// 只要伺服器有響應資料,就會把響應內容寫入檔案並進入 success 回撥,業務需要自行判斷是否下載到了想要的內容
console.log(res)
if(res.statusCode === 200){
_this.setData({
img_l:res.tempFilePath //將下載的圖片臨時路徑賦值給img_l,用於預覽圖片
})
}
}
})
downloadTask.onProgressUpdate((res) => {
console.log('下載進度', res.progress)
console.log('已經下載的資料長度', res.totalBytesWritten)
console.log('預期需要下載的資料總長度', res.totalBytesExpectedToWrite)
})
}
})