Electron - выдает Не разрешено загружать локальный ресурс при использовании showOpenDialog

Question

Я просто хотел использовать showOpenDialog и загрузить изображение. Но когда я выбираю изображение, приложение будет искать sh.

main. js:

...
  ipcMain.on('open-file-dialog', function (event) {
    const window = BrowserWindow.getFocusedWindow();

    dialog.showOpenDialog(window, {
      properties: ['openFile']
    }, p => {
      console.log(p)
    });
  })

средство визуализации. js:

document.querySelector('#select-image').addEventListener('click', function (event) {
    ipcRenderer.send('open-file-dialog')
});

Когда Я выбираю все, что показывает эта ошибка в консоли: Not allowed to load local resource: file:///start, а версия Electron - 8.2.5

Edit 1:

Это предупреждение (или может быть ошибкой) отображается в терминале objc[50899]: Class FIFinderSyncExtensionHost is implemented in both /System/Library/PrivateFrameworks/FinderKit.framework/Versions/A/FinderKit (0x7fff951e61d0) and /System/Library/PrivateFrameworks/FileProvider.framework/OverrideBundles/FinderSyncCollaborationFileProviderOverride.bundle/Contents/MacOS/FinderSyncCollaborationFileProviderOverride (0x11298bdc8). One of the two will be used. Which one is undefined.

Редактировать 2: Я собрал образец Gist с помощью Electron Fiddle: здесь

Answer 1

Электрон не позволяет windows с webSecurity: true загружать файлы. Вы можете просто установить его на false и избавиться от ошибки, но это сделает ваше приложение небезопасным для использования.

Вместо этого вам нужно создать собственный протокол и затем использовать его для загрузки файлов.

Шаг 1: Создайте собственный протокол

Основной процесс:

import { protocol } from 'electron'

...

app.on('ready', async () => {
  // Name the protocol whatever you want
  const protocolName = 'safe-file-protocol'

  protocol.registerFileProtocol(protocolName, (request, callback) => {
    const url = request.url.replace(`${protocolName}://`, '')
    try {
      return callback(decodeURIComponent(url))
    }
    catch (error) {
      // Handle the error as needed
      console.error(error)
    }
  })
  ...

Шаг 2: используйте протокол для загрузки файлов

Метод 1: получить путь из основного процесса:

Главный процесс:

ipcMain.on('open-file-dialog', function (event) {
  const window = BrowserWindow.getFocusedWindow();

  dialog.showOpenDialog(window, { properties: ['openFile'] })
    .then(result => {
      // Send the path back to the renderer
      event.sender.send('open-file-dialog-reply', { path: result.filePaths[0] })
    })
    .catch(error => {
       console.log('Could not get file path')
    })
})

Процесс рендеринга:

<img id="image-1">

ipcRenderer.on('open-file-dialog-reply', (event, data) => {
  const path = data.path
  loadImage(path)
}

function loadImage (path) {
  const image1 = document.getElementById('image-1')
  image1.src = `safe-file-protocol://${path}`
}

Метод 2: загрузить путь прямо в рендерер:

Процесс рендеринга:

<img id="image-1" data-path="C:/test.jpg">

function loadImage () {
  const image1 = document.getElementById('image-1')
  const path = image1.dataset.path
  image1.src = `safe-file-protocol://${path}`
}

loadImage()