文件預(yù)覽和下載

在下載之前，我們得先調(diào)用接口獲取文件下載的url

然后通過wx.downloadFile將下載文件資源到本地

wx.downloadFile({
   url: res.data.url,
   success: function (res) {
      console.log('數(shù)據(jù)',res);
   }
})

tempFilePath就是臨時臨時文件路徑。
通過wx.openDocument打開文件。
showMenu表示預(yù)覽文件右上方的菜單，你可以在該菜單中選擇保存文件，將文件顯示的保存到本地。

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

到這里文件的預(yù)覽和存儲就完成了，你可以顯示的看到文件的存儲位置。



這是文件操作的其中一種方式，如果你要具體的操作文件，請繼續(xù)向下看。

文件系統(tǒng)

文件系統(tǒng)是這篇著重要講的，其實在上文中提到的wx.downloadFile這一步就是文件下載的關(guān)鍵，文件下載成功(臨時)會觸發(fā)success回調(diào)，你可以通過DownloadTask監(jiān)聽文件下載的進度，當downloadTask進度為100時，downloadFile的success下載成功就會被觸發(fā)。

      const downloadTask = wx.downloadFile({
        url: res.data.url,
        success: function (res) {
          // progress進度100時觸發(fā)success
        }
      })
      downloadTask.onProgressUpdate((res) => {
        console.log('下載進度', res.progress)
        console.log('已經(jīng)下載的數(shù)據(jù)長度', res.totalBytesWritten)
        console.log('預(yù)期需要下載的數(shù)據(jù)總長度', res.totalBytesExpectedToWrite)
      })

wx.downloadFile 的tempFilePath對應(yīng)的就是臨時文件的存儲位置，這個文件是會被刪除的。因此如果你需要持久化文件，則需要調(diào)用saveFile來保存文件。同時tempFilePath也可以作為一個中轉(zhuǎn)，為后續(xù)使用資源提供支持，所以我們在后續(xù)調(diào)用wx.openDocument時，tempFilePath其實是做了文件中轉(zhuǎn)，在openDocument對文件做了后續(xù)的保存或預(yù)覽操作。

微信小程序本身自帶一個文件系統(tǒng)，官網(wǎng)介紹：文件系統(tǒng)

在文件系統(tǒng)中有關(guān)于本地臨時文件的介紹：

本地臨時文件只能通過調(diào)用特定接口產(chǎn)生，不能直接寫入內(nèi)容。本地臨時文件產(chǎn)生后，僅在當前生命周期內(nèi)保證有效，重啟之后不一定可用。如果需要保證在下次啟動時無需下載，可通過 FileSystemManager.saveFile() 或 FileSystemManager.copyFile() 接口把本地臨時文件轉(zhuǎn)換成本地緩存文件或本地用戶文件。

在上文中我們將wx.downloadFile返回的臨時路徑當作中轉(zhuǎn)，調(diào)用wx.openDocument來保存文件，這是一種方法，還有一種就是操作文件系統(tǒng)API，對臨時文件進行移動、保存、復(fù)制等操作。

下面我們通過文件系統(tǒng)來實現(xiàn)文件的保存：

API文檔：wx.getFileSystemManager()

流程如下：

1、獲取文件下載url

2、wx.downloadFile下載文件

3、判斷文件夾是否存在：

• 存在：通過saveFile直接下載
• 不存在：通過mkdir創(chuàng)建文件夾，創(chuàng)建完成后，通過saveFile直接下載

  async downloadPdf(id) {
    let that = this;
    let res = await getPdfAPI(id);
    // 下載文件
    wx.downloadFile({
      url: res.data.url,
      success: async (res) => {
        // 設(shè)置存儲路徑
        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) {
          // 不存在： 創(chuàng)建文件夾
          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(); // 文件系統(tǒng)
      fileManager.saveFile({
        tempFilePath: tempFilePath, // 臨時文件路徑
        filePath: myPath + '/myFileName.pdf',  // 文件夾路徑 + 文件名
        success: function (res) {
          resolve(res)
        },
        fail: function (err) {
          reject(err)
        }
      })
    })
  },

  // 創(chuàng)建文件夾
  fileMkdir(myPath) {
    return new Promise(function (resolve, reject) {
      const fileManager = wx.getFileSystemManager(); // 文件系統(tǒng)
      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(); // 文件系統(tǒng)
      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是一個字符串，表示文件系統(tǒng)中的用戶目錄路徑 (本地路徑)

關(guān)于存儲位置：

PC端中：

wx.env.USER_DATA_PATH默認指向usr文件夾，微信開發(fā)者工具中可以看到保存路徑：

真機中：
真機的默認存儲位置為：內(nèi)部存儲/Android/data/com.tencent.mm/MicroMsg/wxanewfiles/
也就是wxanewfiles文件夾下的子文件夾，該文件夾不固定

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

如果你覺得本文章不錯，歡迎點贊??、收藏??、轉(zhuǎn)發(fā)?哦~
閱讀其它：
微信小程序記住密碼，讓登錄解放雙手 （??點擊直達）
微信小程序動態(tài)生成表單來啦！你再也不需要手寫表單了！ （??點擊直達）
根據(jù)URL批量下載文件并壓縮成zip文件 （??點擊直達）
文檔、視頻、圖片上傳(點擊、拖拽、批量導(dǎo)入)要????怎么實現(xiàn)？！ （??點擊直達）
一文搞懂原型和原型鏈 （??點擊直達）文章來源地址http://www.zghlxwxcb.cn/news/detail-763561.html

到了這里，關(guān)于微信小程序文件預(yù)覽和下載-文件系統(tǒng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！