如何访问项目根目录之外的静态文件？答案

【问题标题】：How I can access static files outside the project root?如何访问项目根目录之外的静态文件？
【发布时间】：2019-12-25 02:53:38
【问题描述】：

我正在使用 Electron 和 React 开发一个应用程序，它是一种 mp3 播放器。问题是我想播放不在项目文件夹中的音频。如何从我的硬盘上传这些文件？

import React from 'react';
import Sound from 'react-sound';

class App extends React.Component {
  render() {
    return (
      <Sound
      url='/media/user/Vol/a.mp3'
      playStatus={Sound.status.PLAYING}
      playFromPosition={300}
      onLoading={this.handleSongLoading}
      onPlaying={this.handleSongPlaying}
      onFinishedPlaying={this.handleSongFinishedPlaying}
    />
    )
  }
}

export default App;

我尝试将网址设置为file:///media/user/Vol/a.mp3，但它不起作用。

【问题讨论】：

我怀疑您的问题与此处解决的问题相同：stackoverflow.com/questions/47196800/…
不是，我的问题是需要从项目文件夹中导入文件。
不知道有没有可能。大多数（如果不是全部）浏览器出于安全原因阻止它。此链接询问为什么 JS 不能提供一些好的答案。 security.stackexchange.com/questions/201208/…。我说 JS 是因为 TS 转译为 JS，这意味着 TS 不能比它运行的更好或拥有更多的权限。

标签： reactjs electron

【解决方案1】：

当然，Electron 可以访问其项目根目录之外的文件。如果不能，它对制作桌面应用程序没有任何好处。

在 Electron 中有几种方法可以做到这一点。

dialog API 可让您向用户展示来自其操作系统的标准文件打开对话框。

File Object API 让您可以直接与文件系统上的文件对话。

shell API 允许您运行本机命令，例如启动本机 MP3 播放器。

更新：我忘了提及与项目根目录之外的文件通信的主要方式之一：通过 node.js 本身。

【讨论】：

是的，我已经在用户选择的文件夹中获得了 mp3 列表，但我需要从 react 中播放它，这就是我构建的用户界面
您可能需要在节点中加载数据并将其传递给 Electron，可能通过流。你有没有追求过这个方向？

【解决方案2】：

以下是您可以在应用程序中尝试的示例

//audioFile: path of your audio file
export const playAudio = (audioFile) => {
  if (!audioFile) return;

  if (process.platform === 'darwin') {
    let command = `afplay ${audioFile}.aiff`;
    exec(command, (error, _, stderr) => {
      if (error) {
        stderr: ${stderr}`);
      }
    });
  } else {
    // Try an mp3 file format
    var audio = new Audio(audioFile);
    audio.play();
  }
};

【讨论】：

在我的 Electron 或 React 源代码中？
这可以是你的辅助函数，你可以在任何需要播放音频的地方调用它。

【解决方案3】：

简单地说，URL 应该是这样的E:\folder\musique.mp3（在 windows 上）

我猜你允许用户选择播放哪个音频文件。所以首先你会在主进程中做这样的事情

ipcMain.handle('get-audio', async () => {
    let files = []
    try {
      files = (await dialog.showOpenDialog({
        properties: ['openFile', 'multiSelections']
      })).filePaths
    } catch (error) {
      console.error(error);
    }
    return files
});

在渲染器进程中添加一个按钮或类似的事件

const files = await ipcRenderer.invoke('get-audio') 
// update the stats here

然后在 BrowserWindow 中禁用网络安全首选项

new BrowserWindow({
    webPreferences: {
      webSecurity: false, // very important 
    }
  });

【讨论】：

我已经有了，问题是播放歌曲。
非常感谢，它解决了我的问题，webSecurity: false。