Question

我想从我的项目public / logos文件夹中获取文件名数组。我正在使用create-react-app模板，并且您猜想，项目启动后，我无法在浏览器中使用const fs = require('fs')。

因此，有什么方法可以在npm start命令之后立即填充数组并从文件夹中获取文件名数组，还是我没有上下文？

const fs = require('fs')
const path = require('path')
const appRoot = require('app-root-path').path

const getNames = () => {
    fs.readdir(path.join(appRoot, "public", "logos"), (err, files) => {
        return files
    })
}

Answer 1

尽管Sathishkumar是正确的，但这不是唯一的方法：拥有仅用于读取静态图像的应用程序服务器在许多情况下可能会太多。

您可以做的是通过更改Webpack配置来处理此问题（这需要您eject，因此请非常小心）。

在webpack中，您可以使用所有Nodejs功能，但必须对Web应用程序进行静态更改。

一个想法：

用html-copy-plugin手动复制dist文件夹中的每个图像
从节点读取该文件夹中的每个图像文件，并生成图像名称列表
使用webpack DefinePlugin

现在您将能够从这个新的全局文件中读取图像名称。

注意：这不会动态读取文件夹中的资源。如果添加/删除图像，您将被迫重复该应用程序的构建过程。

Answer 2

是的。这是没有上下文的。在基于浏览器的JS应用程序中不可能。您无法在浏览器中使用Javascript访问文件系统。

您可以使用NodeJS（或相同的其他任何语言）来创建一个REST API，就像您提到的那样，它将返回文件列表，然后可以在前端使用它（诸如fetch或package-axios之类的API）。这是首选的方法。

Answer 3

如果您需要从文件系统读取文件，则需要启动服务器（例如express），然后根据前端的请求或粘贴在浏览器地址字段中的链接在服务器上读取此文件。

开始之前从文件夹中读取文件

3 个答案: