Node.js具有express和react，fs.readdir可以'找不到文件

Node.js with express and react, fs.readdir can't find files

本文关键字：可以 文件 找不到 readdir fs 具有 js express react Node      更新时间：2023-09-26

在我的应用程序中，我使用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错误"gethttp://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的新手，所以如果有任何帮助，我将不胜感激。

根据您的问题和评论判断，我认为您混淆了前端和后端代码。

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

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

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

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

它可以这样工作：

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

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

例如，如果您的公共文件有一个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-您需要确切地知道需要哪些文件。

相关文章：