文件解决 - 本地文件加载

咱们在应用 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 地址：链接