文件預覽和下載

在下載之前，我們得先調用接口獲取文件下載的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文件 （??點擊直達）
文檔、視頻、圖片上傳(點擊、拖拽、批量導入)要????怎么實現？！ （??點擊直達）
一文搞懂原型和原型鏈 （??點擊直達）

總結

以上是生活随笔為你收集整理的微信小程序文件预览和下载-文件系统的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。