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或点赞收藏支持一下

本文地址：https://xuxin123.com/electron/local-file

本文github地址：链接