When we use electron, sometimes involves some file processing, such as file download, or local file loading (local music, local pictures, etc.), this chapter mainly introduces the electron local file loading. In fact, this function is more common, such as we downloaded a certain skin theme local, want to load in the local, or do a music player, load the local music to play. Goal: Use input file to get the local address of an image or music file (of course, you can use the local address of an existing file) to display and play it.

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, to obtain the local file display, the user has to select the input file, obtain the file object, and perform operation display on the file object:

<a-upload :customRequest="customRequest" name="file" :showUploadList="false" :multiple="true" > <a-button> <upload-outlined></upload-outlined> add picture </a-button> </a-upload> <a-image :width="200" :height="200" : SRC =" state-image" / > function customRequest (fileData) {const file = fileData. File state. The image = window. The URL. CreateObjectURL (file) / / or: 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) } }Copy the code

For example, when the image is displayed locally, use createObjectURL to create the URL object directly for display or use readAsDataURL to convert it to Base64 for display. Of course everything is simple in Electron, we can use the local path to load the file, but of course it requires a little processing.

Electron Local file loading

For example, if we know the path of a local image, let’s say it is C:\Users\Administrator\Downloads\1.png in the download folder, let’s assign the address to the SRC of img:

<a-upload :customRequest="customRequest" name="file" :showUploadList="false" :multiple="true" > <a-button> <upload-outlined></upload-outlined> add picture </a-button> </a-upload> <a-image :width="200" :height="200" : SRC =" state-image" /> function customRequest(fileData) { const path = fileData.file.path state.image = path }Copy the code

Net ::ERR_UNKNOWN_URL_SCHEME error net::ERR_UNKNOWN_URL_SCHEME error net::ERR_UNKNOWN_URL_SCHEME error net::ERR_UNKNOWN_URL_SCHEME error net::ERR_UNKNOWN_URL_SCHEME error net::ERR_UNKNOWN_URL_SCHEME By default, chromium does not read files via the file:// protocol, reference link, so it does not display directly. You could have set chromium startup parameters (– allow-file-access-from files) to solve this problem. But unfortunately Electron wasn’t buying it:

/ / app.com invalid mandLine. AppendSwitch (' allow - file - access - from - files', true)Copy the code

We need to process this local path so that it does not load via the file:// protocol, so how do we do that? We can use the Protocol module to register custom protocols and intercept existing protocol requests. For example, we implement an Atom :// protocol to load music files for playback:

Main process: App. WhenReady (). Then (() = > {/ / the need in the app. Ready to trigger after using protocol. The 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> add local music </a-button> </a-upload> <audio: SRC =" state-audio "controls> </audio> function  customRequest(fileData) { const path = 'atom:///' + fileData.file.path state.audio = path }Copy the code

C:\Users\Administrator\Downloads\1.png We’ll add atom:/// to this path, changing it to atom:///C:\Users\Administrator\Downloads\1.png(the same for MAC, atom), and when it matches atom, we’ll intercept the protocol request and return a local path. The important thing to note here is that if our path has a Chinese name, then the OBTAINED URL is encoded with encodeURI, which we need to decode with decodeURI in the callback.

After registering the custom protocol, we simply load the local path with atom:///(any other name is ok, custom) before it.

This series of updates can only be arranged on weekends and after work, the update of more content will be slow, hope to help you, please more star or like collection support

This article address: xuxin123.com/electron/lo… This post is on Github