电子-抛出使用showOpenDialog时不允许加载本地资源 [英] Electron - throws Not allowed to load local resource when using showOpenDialog

问题描述

我只想使用 showOpenDialog 并加载图像。但是当我选择一个图像应用程序时会崩溃。

I just wanted to use showOpenDialog and load an image. But when I select an image app will crash.

main.js：

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

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

renderer.js：

renderer.js:

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

当我选择任何内容时，此错误将在控制台中显示：
不允许加载本地资源：file：/// start
，Electron版本为 8.2.5

When I select anything this error shows in console : Not allowed to load local resource: file:///start and the Electron version is 8.2.5

编辑1：

此警告（或可能是错误）显示在终端 objc [50899] ：类FIFinderSyncExtensionHost在/System/Library/PrivateFrameworks/FinderKit.framework/Versions/A/FinderKit（0x7fff951e61d0）和/System/Library/PrivateFrameworks/FileProvider.framework/OverrideBundles/FinderSyncCollaborationFileProviderProviderOverride.bundle/Contents/MacOS中实现0x11298bdc8）。将使用两者之一。

This warning (or may be error) is shown in the terminal 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：
我使用Electron Fiddle将示例Gist放在一起：此处

推荐答案

电子没有t允许具有 webSecurity：true 的Windows加载文件。您可以简单地将其设置为 false 并消除该错误，但这会使您的应用程序使用不安全。

Electron doesn't allow windows with webSecurity: true to load files. You could simply set it to false and get rid of the error but it would make your app unsafe to use.

相反，您要做的是创建一个自定义协议，然后使用该协议来加载文件。

Instead, what you have to do is to create a custom protocol and then use that for loading files.

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：从主流程获取路径：

主流程：

Step 2: use protocol to load files

Method 1: get path from the main process:

Main process:

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

渲染器进程：

Renderer process:

<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：直接在渲染器中加载路径：

渲染器过程：

Method 2: load path directly in the renderer:

Renderer process:

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

这篇关于电子-抛出使用showOpenDialog时不允许加载本地资源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！