带有express和react的Node.js，fs.readdir找不到文件

Question

在我的应用程序中，我使用 Node.js、React 和 Express。我想从光盘上的目录中加载图片。 假设我要加载的文件位于 //localhost:3000/images/own/

（当我输入 ex. //localhost:3000/images/own/my_pic.jpg 浏览器返回某些图片）

我以前是用ajax调用来做的：

$.ajax({
        url: '/images/own',
        dataType: 'text',
        success: function (data){
         //some actions here
        }
 });

但现在我收到 404 错误 'GET http://localhost:3000/images/own/ 404 (Not Found)'。

我知道使用 node 加载文件通常是使用 fs 完成的，但是由于我的脚本是用 babel 编写的（在 React 中需要），所以我不能使用 require('fs')。我找到了可以使用的https://github.com/OptimalBits/fs.js（通过将其包含在我的html文件中），但是在示例中使用它时：

FSFactory(1024*1024, 'images/own', function(err, fs){
        if(err){
            console.log(err);
        }

        fs.readdir('/', function(err, entries){
            if(err)
                console.log(err);

            console.log(entries);

        });
    });

fs 对象为空，readdir 返回空表。

我应该以不同的方式提供目录路径还是有其他方式来加载文件？我对节点很陌生，所以任何帮助都将不胜感激。

Answer 1

从你的问题和你的 cmets 来看，我认为你混淆了前端和后端代码。

尽管两者都是用 Javascript 编写的，但前端（浏览器）代码对其施加了更多限制。一种这样的限制是读取文件或目录的能力。这就解释了为什么你不能使用fs。

另外，require() 不是 Javascript（如 “语言的一部分”）命令，而是 Node（= 后端）提供的用于加载模块的东西。因此，您也不能（直接）在浏览器中使用它。

有一些方法可以编写针对浏览器的类似 Node 的代码，其中对 require() 的调用被转换为浏览器可以理解的内容。一种这样的方式是browserify。但是，这仍然不允许您在浏览器中运行特定的后端功能（换句话说，require('fs') 不会被翻译成任何有用的东西）。

现在，回到您的实际问题：如果您想读取服务器上包含图像文件的目录，并从中构建图像库，则需要在服务器上执行目录读取。

它可以像这样工作：

• 您的前端代码将查询服务器（例如，使用 AJAX 调用）；
• 服务器读取目录内容，正确格式化（例如，JSON），然后返回给前端；
• 前端获取数据并动态生成图库。

Answer 2

使用express 时，您可以告诉express 您有一个需要通过http(s) 直接访问的目录。

例如，如果您的公共文件有一个 public 目录，您可以通过这种方式使其“可见”：

app.use(express.static('public'));

因此，如果您有文件 public/images/own/my_pic.jpg，则可以通过 http://localhost:3000/images/own/my_pic.jpg 访问它

唯一需要注意的是，您没有在http://localhost:3000/images/own 上获得文件列表 - 您需要确切知道您需要哪些文件。