從零開始的electron開發-文件處理-本地文件加載

文件處理-本地文件加載

咱們在使用electron時，有時會涉及一些文件的處理，好比文件的下載，或者本地文件的加載（本地音樂，本地圖片等），本章主要介紹electron本地文件的加載。
其實這個功能仍是比較常見的，好比咱們下載了某某皮膚主題本地，想在本地加載，或者是作一個音樂播放器，加載本地音樂進行播放。
目標：使用input file獲取圖片或者音樂文件的本地地址（固然你能夠直接用已有文件的本地地址），進行展現和播放。

web本地文件加載

瀏覽器爲了安全考慮，在web頁面進行文件加載時，是禁用了file://協議進行文件展現的，通常來講要想獲取本地文件展現，得讓用戶進行input file選擇，獲取File對象，對這個File對象進行操做展現：

<a-upload
  :customRequest="customRequest"
  name="file"
  :showUploadList="false"
  :multiple="true"
>
  <a-button>
    <upload-outlined></upload-outlined>
    添加圖片
  </a-button>
</a-upload>
<a-image
  :width="200"
  :height="200"
  :src="state.image"
  />


function customRequest(fileData) {
  const file = fileData.file
  state.image = window.URL.createObjectURL(file)
  // 或者:
   if (file) {
    var reader = new FileReader()
    reader.onload = function (evt) {
      state.image = evt.target.result
    }
    reader.onerror = function (evt) {
      console.error(evt)
    }
    reader.readAsDataURL(file)
  }
}

好比在進行圖片的本地顯示時，使用createObjectURL直接建立url對象進行展現或者使用readAsDataURL將其轉化爲base64進行展現。
固然在electron中一切都變得簡單起來，咱們可使用本地路徑加載文件，固然得進行一些小處理。

electron本地文件加載

好比說咱們已知一個本地圖片的路徑，假設這個路徑爲下載文件夾中C:\Users\Administrator\Downloads\1.png，咱們將這個地址賦值給img的src：

<a-upload
  :customRequest="customRequest"
  name="file"
  :showUploadList="false"
  :multiple="true"
>
  <a-button>
    <upload-outlined></upload-outlined>
    添加圖片
  </a-button>
</a-upload>

<a-image
  :width="200"
  :height="200"
  :src="state.image"
  />

function customRequest(fileData) {
  const path = fileData.file.path
  state.image = path
}

這裏的path就是本地文件的地址，當你賦值以後發現圖片並不能加載，會報一個net::ERR_UNKNOWN_URL_SCHEME的錯誤，這是因爲直接添加本地路徑的話，加載文件其實是經過file://協議進行加載的，默認狀況下chromium並不能經過file://協議來讀取文件，參考連接， 故並不能直接顯示出來，原本能夠設置chromium啓動參數
(–-allow-file-access-from-files)來解決這個問題，可是比較遺憾electron並不吃這個一套：

// 無效
app.commandLine.appendSwitch('allow-file-access-from-files', true)

咱們須要對這個本地路徑進行處理，讓其不經過file://協議加載，那麼如何實現呢？
咱們能夠經過protocol模塊來註冊自定義協議並攔截現有協議請求，好比咱們實現一個atom://協議加載音樂文件進行播放：

主進程：
app.whenReady().then(() => {
  // 這個須要在app.ready觸發以後使用
  protocol.registerFileProtocol('atom', (request, callback) => {
    const url = request.url.substr(7)
    callback(decodeURI(path.normalize(url)))
  })
})

渲染進程：
<a-upload
  :customRequest="customRequest"
  name="file"
  :showUploadList="false"
  :multiple="true"
>
  <a-button>
    <upload-outlined></upload-outlined>
    添加本地音樂
  </a-button>
</a-upload>
<audio :src="state.audio" controls>
</audio>


function customRequest(fileData) {
  const path = 'atom:///' + fileData.file.path
  state.audio = path
}

原來呢咱們是直接賦值相似於C:\Users\Administrator\Downloads\1.png，咱們在這個路徑上加上atom:///變爲atom:///C:\Users\Administrator\Downloads\1.png(mac同理，atom是同樣的)，當匹配到atom時，就會攔截這個協議請求，返回一個本地路徑。這裏須要注意的一點是若是咱們的路徑有中文名，那麼獲取的url是encodeURI編碼後的，咱們在callback回調時須要用decodeURI進行解碼。

註冊了自定義協議以後，咱們只需在加載本地路徑時，在前面加上atom:///(其餘名也可，自定義)便可。

本系列更新只有利用週末和下班時間整理，比較多的內容的話更新會比較慢，但願能對你有所幫助，請多多star或點贊收藏支持一下

本文地址：連接
本文github地址：連接