文件解决-本地文件加载
咱们在应用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地址：链接