Node.js 启动前从文件夹中读取文件

Node.js 启动前从文件夹中读取文件,node.js,reactjs,Node.js,Reactjs,我想从我的project public/logos文件夹中获取文件名数组。我正在使用CreateReact应用程序模板,正如您所猜测的,我无法在项目启动后在浏览器中使用const fs=require('fs') 那么,在npmstart命令并从文件夹中获取文件名数组之后,是否有任何方法填充数组,或者我是否脱离了上下文 const fs = require('fs') const path = require('path') const appRoot = require('app-root-p

我想从我的project public/logos文件夹中获取文件名数组。我正在使用CreateReact应用程序模板,正如您所猜测的,我无法在项目启动后在浏览器中使用
const fs=require('fs')

那么,在
npmstart
命令并从文件夹中获取文件名数组之后,是否有任何方法填充数组,或者我是否脱离了上下文

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

对。这是断章取义的。在基于浏览器的JS应用程序中不可能。您无法在浏览器中使用Javascript访问文件系统


您可以使用NodeJS(或任何其他语言)创建您提到的RESTAPI,该API将返回文件列表,然后可以在前端使用它(如fetch或package-axios等API)。这是首选方法。

如果需要从文件系统读取文件,则需要启动服务器(如express),然后通过前端请求或通过粘贴在浏览器地址字段中的链接在服务器上读取这些文件。

尽管Sathishkumar是正确的,这并不是唯一的方法:在许多情况下,仅仅为了读取静态图像而使用应用服务器可能会太多

您可以通过更改网页包配置来处理此问题(这需要您先非常小心

在webpack中,您可以使用所有Nodejs功能,但必须对webapp进行静态更改

一个想法:

  • 手动复制
    dist
    文件夹中的每个图像
  • 从节点读取该文件夹中的每个图像文件,并生成图像名称列表
  • 使用将图像列表作为全局变量放入捆绑包中
现在,您将能够从这个新的全局文件中读取图像名称


注意:这不是对文件夹中资源的动态读取。如果添加/删除图像,您将被迫重复应用程序的生成过程。

您无法从浏览器读取文件。您必须使用服务器来提供这些文件。@ViranMalaka您的意思是,我应该创建一个节点api并通过它启动项目吗?您应该使用express browser cont作为一个要读取文件的服务器来执行此操作