React项目中如何使用外部资源

Question

我正在开发一个 React / VTK.js 项目， 在 VTK.js 中，要读取 VTK 文件，我们使用 VTK 文件的目录（必须位于公共文件夹树结构中）调用此函数。

const reader1 = vtkPolyDataReader.newInstance();
reader1
       .setUrl(`Ressources/MrSKIN.vtk`)
       .then(async () => {
            pd = await reader1.getOutputData(0);
            ...

我需要读取其他“系统目录”中的VTK文件：

reader1
       .setUrl(`C:/Users/admin/data/MrSkin.vtk`)

但这不起作用，我读到我必须重新配置 webpack 文件，但我不知道到底该怎么做

Answer 1

首先，您无法直接访问 React 中项目目录之外的文件（网络浏览器的安全强制措施）。因此读取VTK文件将不起作用。

如果您想让它发挥作用，请按以下步骤操作：

1.) 首先使用 Express Js 设置服务器 2.) 创建一个静态文件来托管您的文件 3.) 在配置静态服务器以用于服务后，将文件上传到该静态服务器上（为此使用 Express 的“express.static”）

这是一个例子：

    const express = require('express');
const app = express();

// Serve uploaded files from the 'uploads' directory
app.use('/uploads', express.static('uploads'));

// Your other routes and server configuration here

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

在此示例中，可以从 http://yourserver.com/uploads访问上传目录中的文件。

现在最后一步是修改 React 代码以使用服务器上的 URL 读取 VTK 文件：

    const reader1 = vtkPolyDataReader.newInstance();
reader1
  .setUrl(`/uploads/MrSkin.vtk`) // Use the correct URL on your server
  .then(async () => {
    pd = await reader1.getOutputData(0);
    // ...
  })
  .catch((error) => {
    console.error(error);
  });

将 /uploads/MrSkin.vtk 替换为服务器上上传的 VTK 文件的实际 URL 路径。

Answer 2

要读取React/VTK.js项目中不同系统目录中的VTK文件，需要重新配置webpack文件。以下是要遵循的一般步骤： 从 React 应用程序中弹出：您需要从 React 应用程序中弹出才能完全控制 webpack 配置。要弹出，请在终端中运行以下命令：

npm run eject

配置webpack文件：弹出后，你的项目目录下会有一个config文件夹。在此文件夹中，您将找到一个 webpack.config.js 文件。打开此文件并将以下代码添加到 module.exports 对象中：

module.exports = {
  // ...
  resolve: {
    alias: {
      'vtk.js': path.resolve(__dirname, '../path/to/vtk.js'),
    },
  },
  // ...
};

将 ../path/to/vtk.js 替换为系统上 vtk.js 文件的路径。 导入 vtk.js：在 React 组件中，您现在可以使用以下代码导入 vtk.js：

import vtkPolyDataReader from 'vtk.js/Sources/IO/Legacy/VTKPolyDataReader';

然后您可以使用vtkPolyDataReader从指定目录读取VTK文件。 值得注意的是，从 React 应用程序中弹出可能是一个复杂的过程，在继续操作之前了解这样做的含义非常重要。此外，修改 webpack 配置可能会产生意想不到的后果，因此在部署应用程序之前彻底测试您的更改非常重要。