chatgpt如何访问本地文件夹 Electron加载本地文件

我们在使用时，有时会涉及一些文件的处理，比如文件的下载，或者本地文件的加载（本地音乐，本地图片等），本章主要介绍本地文件的加载。

其实这个功能还是比较常见的，比如我们下载了某某皮肤主题本地，想在本地加载，或者是做一个音乐播放器，加载本地音乐进行播放。

目标：使用input file获取图片或者音乐文件的本地地址（当然你可以直接用已有文件的本地地址），进行展示和播放。

web本地文件加载

浏览器为了安全考虑，在web页面进行文件加载时，是禁用了file://协议进行文件展示的，一般来说要想获取本地文件展示，得让用户进行input file选择，获取File对象，对这个File对象进行操作展示：

<a style='color:#0000CC;font-size:16px;' -upload
  :customRequest="customRequest"
  name="file"
  :showUploadList="false"
  :multiple="true"
>
  
    
    添加图片
  

<a style='color:#0000CC;font-size:16px;' -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)
  }
}

当然在中一切都变得简单起来，我们可以使用本地路径加载文件，当然得进行一些小处理。

本地文件加载

比如说我们已知一个本地图片的路径，假设这个路径为下载文件夹中C:Users\1.png，我们将这个地址赋值给img的src：

<a style='color:#0000CC;font-size:16px;' -upload
  :customRequest="customRequest"
  name="file"
  :showUploadList="false"
  :multiple="true"
>
  
    
    添加图片
  

<a style='color:#0000CC;font-size:16px;' -image
  :width="200"
  :height="200"
  :src="state.image"
  />
function customRequest(fileData) {
  const path = fileData.file.path
  state.image = path
}

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

我们需要对这个本地路径进行处理，让其不通过file://协议加载，那么如何实现呢？我们可以通过模块来注册自定义协议并拦截现有协议请求，比如我们实现一个atom://协议加载音乐文件进行播放：

主进程：
app.whenReady().then(() => {
  // 这个需要在app.ready触发之后使用
  protocol.registerFileProtocol('atom', (request, callback) => {
    const url = request.url.substr(7)
    callback(decodeURI(path.normalize(url)))
  })
})
渲染进程：
<a style='color:#0000CC;font-size:16px;' -upload
  :customRequest="customRequest"
  name="file"
  :showUploadList="false"
  :multiple="true"
>
  
    
    添加本地音乐
  

<a style='color:#0000CC;font-size:16px;' udio :src="state.audio" controls>

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