Question

我有一个html文件应该显示uploads目录中的每张图片，但是它不能识别uploads目录。我正在使用nodejs服务器。这是我的html文件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>gummy bear</title>
  <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link href="css/styles.css" rel="stylesheet">
</head>
<body>

  <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  <script>
  var dir = "/uploads/";
  var fileextension = ".jpg";
  $.ajax({
      url: dir,
      success: function (data) {
          $(data).find("a:contains(" + fileextension + ")").each(function () {
              var filename = this.href.replace(window.location.host, "").replace("http://", "");
              $("body").append("<img src='" + dir + filename + "'>");
          });
      }
  });
  </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

以下是我的目录布局：

app.js  css  index.html  javascripts  LICENSE  node_modules  package.json  README.md  upload.html  uploads

和上传内容是：

➜  uploads ls
1.jpg

提前致谢！

Answer 1

查看示例代码，似乎HTML文件需要从http://localhost:3000/uploads返回一些HTML。

问题是/uploads端点为什么不返回任何内容而是返回404响应？

这个问题的答案在于node.js应用程序中的 main 可执行Javascript文件。可能是名为server.js或index.js的文件。

以下是如何为您的HTML文件创建正确的node.js应用程序的示例：

<强> server.js

app.all('/uploads', function (req, res) {
    var folder = './public/uploads',
        html = '<html><body>##files##</body></html>';

    fs.readdir(folder, (err, files) => {
        var fileHrefs = '';

        files.forEach(function (file) {
            fileHrefs += '<a href="http://localhost:3000/uploads/' + file + '">' + file + '</a>';
        });

        html = html.replace('##files##', fileHrefs);

        res.send(err || html);
    })
});

这段代码遍历uploads目录中的所有文件，并将它们包装在a标记中，然后由服务器返回。

<强>的index.html

要使索引HTML文件正常工作，需要进行一些小的更改：

将$(data).find()更改为$(data).filter()
从图像源中删除目录。将<img src='" + dir + filename + "'>更改为<img src='" + filename + "'>

完整的工作样本

您还可以在此处找到整个工作示例：https://github.com/kohlikohl/list-images-in-dir

html文件找不到uploads目录

1 个答案: