javascript - 带有 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(未找到)'。

我知道用 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 返回空表。

我应该以不同的方式给出目录路径还是有任何其他方式来加载文件？我是 Node 的新手，所以任何帮助将不胜感激。

Answer 1

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

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

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

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

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

它可以像这样工作:

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