微信小程式檔案預覽和下載-檔案系統

DCodes發表於2023-11-25
微信小程式

檔案預覽和下載

在下載之前，我們得先呼叫介面獲取檔案下載的url
然後透過wx.downloadFile將下載檔案資源到本地

wx.downloadFile({
   url: res.data.url,
   success: function (res) {
      console.log('資料',res);
   }
})

tempFilePath就是臨時臨時檔案路徑。
透過wx.openDocument開啟檔案。
showMenu表示預覽檔案右上方的選單，你可以在該選單中選擇儲存檔案，將檔案顯示的儲存到本地。

// 預覽和下載
wx.downloadFile({
   url: res.data.url,
   success: function (res) {
      const filePath = res.tempFilePath  // 臨時檔案路徑
      wx.openDocument({
         filePath: filePath,
         showMenu: true // 預覽檔案右上方的...
      })
    }
})

到這裡檔案的預覽和儲存就完成了，你可以顯示的看到檔案的儲存位置。
這是檔案操作的其中一種方式，如果你要具體的操作檔案，請繼續向下看。

檔案系統

檔案系統是這篇著重要講的，其實在上文中提到的wx.downloadFile這一步就是檔案下載的關鍵，檔案下載成功(臨時)會觸發success回撥，你可以透過DownloadTask監聽檔案下載的進度，當downloadTask進度為100時，downloadFile的success下載成功就會被觸發。

      const downloadTask = wx.downloadFile({
        url: res.data.url,
        success: function (res) {
          // progress進度100時觸發success
        }
      })
      downloadTask.onProgressUpdate((res) => {
        console.log('下載進度', res.progress)
        console.log('已經下載的資料長度', res.totalBytesWritten)
        console.log('預期需要下載的資料總長度', res.totalBytesExpectedToWrite)
      })

wx.downloadFile 的tempFilePath對應的就是臨時檔案的儲存位置，這個檔案是會被刪除的。因此如果你需要持久化檔案，則需要呼叫saveFile來儲存檔案。同時tempFilePath也可以作為一箇中轉，為後續使用資源提供支援，所以我們在後續呼叫wx.openDocument時，tempFilePath其實是做了檔案中轉，在openDocument對檔案做了後續的儲存或預覽操作。

微信小程式本身自帶一個檔案系統，官網介紹：檔案系統

在檔案系統中有關於本地臨時檔案的介紹：

本地臨時檔案只能透過呼叫特定介面產生，不能直接寫入內容。本地臨時檔案產生後，僅在當前生命週期內保證有效，重啟之後不一定可用。如果需要保證在下次啟動時無需下載，可透過 FileSystemManager.saveFile() 或 FileSystemManager.copyFile() 介面把本地臨時檔案轉換成本地快取檔案或本地使用者檔案。

在上文中我們將wx.downloadFile返回的臨時路徑當作中轉，呼叫wx.openDocument來儲存檔案，這是一種方法，還有一種就是操作檔案系統API，對臨時檔案進行移動、儲存、複製等操作。

下面我們透過檔案系統來實現檔案的儲存：

API文件：wx.getFileSystemManager()

流程如下：

1、獲取檔案下載url

2、wx.downloadFile下載檔案

3、判斷資料夾是否存在：

  • 存在：透過saveFile直接下載
  • 不存在：透過mkdir建立資料夾，建立完成後，透過saveFile直接下載
  async downloadPdf(id) {
    let that = this;
    let res = await getPdfAPI(id);
    // 下載檔案
    wx.downloadFile({
      url: res.data.url,
      success: async (res) => {
        // 設定儲存路徑
        let myPath = wx.env.USER_DATA_PATH + '/MyFile'
        try {
          // 判斷資料夾是否存在
          await that.fileExist(myPath)
          // 存在: 儲存檔案到本地
          await that.fileSave(res.tempFilePath, myPath).catch(err => console.log(err));
          wx.showToast({
            title: '儲存成功',
            icon: 'none'
          })
        } catch (e) {
          // 不存在： 建立資料夾
          await that.fileMkdir(myPath).catch(err => console.log(err));
          // 儲存檔案到本地
          await that.fileSave(res.tempFilePath, myPath).catch(err => console.log(err));
          wx.showToast({
            title: '儲存成功',
            icon: 'none'
          })
        }
      }
    })
  },

  // 儲存檔案
  fileSave(tempFilePath, myPath) {
    return new Promise(function (resolve, reject) {
      const fileManager = wx.getFileSystemManager(); // 檔案系統
      fileManager.saveFile({
        tempFilePath: tempFilePath, // 臨時檔案路徑
        filePath: myPath + '/myFileName.pdf',  // 資料夾路徑 + 檔名
        success: function (res) {
          resolve(res)
        },
        fail: function (err) {
          reject(err)
        }
      })
    })
  },

  // 建立資料夾
  fileMkdir(myPath) {
    return new Promise(function (resolve, reject) {
      const fileManager = wx.getFileSystemManager(); // 檔案系統
      fileManager.mkdir({
        dirPath: myPath, // 資料夾路徑
        success: function (mkdir) {
          resolve(mkdir)
        },
        fail: function (mkdirerr) {
          reject(mkdirerr)
        }
      })
    })
  },

  // 判斷資料夾是否存在
  fileExist(myPath) {
    return new Promise(function (resolve, reject) {
      const fileManager = wx.getFileSystemManager(); // 檔案系統
      fileManager.access({
        path: myPath,  // 資料夾路徑
        success: function (exist) {
          resolve(exist)
        },
        fail: function (err) {
          reject(err)
        }
      })
    })
  },

注意點：

1、saveFile自定義儲存路徑filePath為資料夾路徑+檔名的拼接

2、saveFile接收的檔案路徑為wx.downloadFile獲取的臨時路徑tempFilePath

3、wx.env.USER_DATA_PATH是一個字串，表示檔案系統中的使用者目錄路徑 (本地路徑)

關於儲存位置：

PC端中：

wx.env.USER_DATA_PATH預設指向usr資料夾，微信開發者工具中可以看到儲存路徑：

真機中：
真機的預設儲存位置為：內部儲存/Android/data/com.tencent.mm/MicroMsg/wxanewfiles/
也就是wxanewfiles資料夾下的子資料夾，該資料夾不固定

參考文件：
wx.downloadFile
wx.openDocument
DownloadTask
wx.env
檔案系統
wx.getFileSystemManager()
FileSystemManager.mkdir(Object object)
FileSystemManager.saveFile(Object object)
FileSystemManager.access(Object object)

如果你覺得本文章不錯，歡迎點贊?、收藏?、轉發✨哦~
閱讀其它：
微信小程式記住密碼，讓登入解放雙手 （?點選直達）
微信小程式動態生成表單來啦！你再也不需要手寫表單了！ （?點選直達）
根據URL批次下載檔案並壓縮成zip檔案 （?點選直達）
文件、影片、圖片上傳(點選、拖拽、批次匯入)要‍‍‍‍怎麼實現？！ （?點選直達）
一文搞懂原型和原型鏈 （?點選直達）

相關文章