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错误＆＃39;获取http://localhost:3000/images/own/ 404（未找到）＆＃39;。

我知道用节点加载文件通常是用fs完成的，但由于我的脚本是用babel编写的（在React中需要），我不能使用 require（＆＃39; fs＆＃39;） 即可。我找到了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

根据您的问题和您的意见判断，我认为您正在混合前端和后端代码。

即使两者都是用Javascript编写的，前端（浏览器）代码也有更多限制。一个这样的限制是能够读取文件或目录。这解释了为什么您无法使用 <script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/async/1.5.0/async.min.js"></script>。

此外，fs不是Javascript（如＆＃34;语言＆＃34; 的一部分）命令，但是Node（= backend）提供给加载模块的东西。因此，您无法（直接）在浏览器中使用它。

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

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

它可以像这样工作：

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

Answer 2

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

例如，如果您的公共文件有public目录，则可以使用＃34;可见＆＃34;这样：

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

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

访问该文件

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

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

2 个答案: