When we use Electron, sometimes we will deal with some files, such as downloading files or loading local files (local music, local pictures, etc.). This chapter mainly introduces the loading of Electron local files. In fact, this function is relatively common, for example, we downloaded a certain skin theme local, want to load in the local, or make a music player, load the local music for playing. Target: Use the input file to get the local address of the image or music file (of course, you can directly use the local address of the existing file), display and play.

Web local file loading

For the sake of security, the browser disallows the file:// protocol during file loading on the Web page for file display. In general, to obtain local file display, users have to select input file, obtain file object, and perform operation display on this file object:

<a-upload :customRequest="customRequest" name="file" :showUploadList="false" :multiple="true" > <a-button> < Upload-outlined ></ Upload-outlined > to add a 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) } }

For example, in the local display of images, the CreateObjectURL object can be directly created for display or the ReadAsDataURL object can be converted to Base64 for display. Of course everything becomes easier in Electron, we can load the file using the local path, and of course we have to do a little bit of processing.

The electron local file load

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

<a-upload :customRequest="customRequest" name="file" :showUploadList="false" :multiple="true" > <a-button> < Upload-outlined ></ Upload-outlined > to add a 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 }

If you assign an image to the file, you will get a “net::ERR_UNKNOWN_URL_SCHEME” error. This is because the file is actually loaded via the file:// protocol if you add a local path. Chromium does not read files via the file:// protocol by default, so the reference link cannot be displayed directly. You could have fixed this by setting the Chromium boot parameter (– allow-file-access-from — files). But it’s a pity Electron doesn’t do that:

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

We need to handle this local path so that it is not loaded through the file:// protocol, so how do we do that? We can use the protocol module to register custom protocols and block existing protocol requests. For example, if 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 > to 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 }

C:\Users\Administrator\Downloads\1.png ///C:\Users\Administrator\Downloads\1.png //C:\Users\Administrator\Downloads\1.png //C:\Users\Administrator\Downloads\1.png //C:\Users\Administrator\ 1.png //C:\Users\Administrator\Downloads\1.png // One thing to note here is that if our path has a Chinese name, then the URL retrieved is encoded with encodeUri, and decodeUri will be used to decode the callback.

Once we have registered our custom protocol, we simply add atom:///(any other name, custom) before the local path is loaded.

This series can only be updated on weekends and after work. If there are too many contents, the update will be slow. I hope it can be helpful to you

This paper addresses: https://xuxin123.com/electron/local-file this paper making address: link