Node.js与快递和反应,fs.readdir无法find文件

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

(当我input例如//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)”。

我知道加载节点的文件通常是用fs完成的,但是由于我的脚本是用babel编写的(在React中需要),所以我不能使用require('fs') 。 我find了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返回空表。

我应该以不同的方式给目录path,还是有其他的方式来加载文件? 我是相当新的节点,所以任何帮助,将不胜感激。

根据你的问题和你的评论来看,我认为你在混合前端和后端代码。

即使两者都用Javascript编写,前端(浏览器)代码也受到更多的限制。 一个这样的限制是能够读取文件或目录。 这就解释了为什么你不能使用fs

此外, require()不是一个Javascript(如在“语言的一部分” )命令,但是节点(=后端)提供加载模块的东西。 因此,你不能在浏览器中直接使用它。

有些方法可以编写针对浏览器的类似节点的代码,在这些代码中require()被调用到浏览器可以理解的地方。 一个这样的方式是browserify 。 但是,这仍然不允许您在浏览器中运行特定的后端function(换句话说, require('fs')不会被翻译成任何有用的东西)。

现在,回到您的实际问题:如果您想要读取服务器上包含映像文件的目录,并从中创build映像库,则需要在服务器上执行目录读取。

它可以这样工作:

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

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

例如,如果您的公共文件具有公共文件夹,则可以通过这种方式“可见”:

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

所以,如果你有文件public/images/own/my_pic.jpg ,可以通过http:// localhost:3000 / images / own / my_pic.jpg

唯一需要注意的是你没有在http:// localhost:3000 / images / own上获得文件列表 – 你需要知道你需要的文件。