Electron development from scratch-file processing-local file loading

File handling-local file loading

When we use electron, sometimes it involves the processing of some files, such as the download of files, or the loading of local files (local music, local pictures, etc.). This chapter mainly introduces the loading of local electron files.
In fact, this function is quite common. For example, we have downloaded a certain skin theme locally and want to load it locally, or make a music player to load local music for playback.
Goal: Use input file to get the local address of a picture or music file (of course you can directly use the local address of an existing file), display and play.

web local file loading

For security reasons, the browser disables the file:// protocol for file display when loading files on the web page. Generally speaking, if you want to get the local file display, you have to let the user select the input file and get the File object. Perform operation demonstration:

<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)
  }
}

For example, when performing a local display of a picture, use createObjectURL to directly create a url object for display or use readAsDataURL to convert it to base64 for display.
Of course, everything becomes simple in electron, we can use the local path to load the file, of course, we have to do some small processing.

electron local file loading

For example, if we know the path of a local picture, suppose this path is C:\Users\Administrator\Downloads\1.png download folder, we assign this address to the src of img:

<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
}

The path here is the address of the local file. When you find that the image cannot be loaded after assigning the value, net::ERR_UNKNOWN_URL_SCHEME will be reported. This is because if you directly add the local path, the loaded file is actually loaded through the file:// protocol. By default Chromium cannot file:// protocol. Refer to link , so it cannot be displayed directly. You can set the chromium startup parameters.
(–-Allow-file-access-from-files) to solve this problem, but unfortunately electron does not use this set:

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

We need to process this local path so that it is not file:// protocol, so how to achieve it?
We can protocol module. For example, we can implement a atom:// protocol to load music files for playback:

主进程：
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
}

It turns out that we directly assign a value similar to C:\Users\Administrator\Downloads\1.png . We add atom:/// to atom:///C:\Users\Administrator\Downloads\1.png (the same is true for mac, atom is the same). When atom is matched, the protocol request is intercepted and a local path is returned. One thing to note here is that if our path has a Chinese name, then the obtained url is encoded by encodeURI, and we need to use decodeURI to decode when we callback.

After registering the custom protocol, we only need to add atom:/// (other names are also available, custom) when loading the local path.

This series of updates can only be organized during weekends and after get off work hours. If there are more content, the update will be slower. I hope it can be helpful to you. Please support it by star or like favorites.

The address of this article: link
This github address: link