1. 程式人生 > >小程式下載圖片、檔案、wx.downloadFile,廢話少說直接上程式碼

小程式下載圖片、檔案、wx.downloadFile,廢話少說直接上程式碼

官方開發文件   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)
    })
  }
  




})