Question

我是node.js的新手，并且一直在谷歌上搜索我上面的问题标题中提到的问题。

基本上我正在构建一个简单的web api，允许用户上传他们的文件，然后再单独查询它们。所以我试图找出如何在服务器目录中显示文件列表，以便记住确切的文件名，而不是记住它们，他们可以从列表中选择它。

这是我的完整HTML代码project/public/index.html（编辑 - 经Oorja回答后）

<!DOCTYPE html>
<html>
    <head>
        <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    </head>

    <style>
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f6f6f6;
            min-width: 230px;
            overflow: auto;
            border: 1px solid #ddd;
            z-index: 1;
        }
        .show {display:block;}
    </style>

    <body>
        <h1>api service</h1>
        <br>
        <div id="upload_form">
            <h3>Upload images</h3>
            <form action="/api/uploadImages" method="post" enctype="multipart/form-data"> 
                <input type="file" name="image" multiple="multiple"><br><br>
                <input type="submit" value="Upload">
            </form>
        </div>

        <div id="query_images">
            <h3>Query images</h3>
            <form action="/api/queryImages" method="get" enctype="text/plain">
                <input type="text" name="image_name"><br><br>
                <input type="submit" value="Query">
            </form>
        </div>

        <div class="dropdown">
            <button onclick="show_list()" class="dropbtn">Images</button>
            <div id="image_list" class="dropdown-content">
                <input type="text" placeholder="Search for your images..." id="userInput">
            </div>
        </div>

        <script>
            function show_list() {
                var image_list = document.getElementById("image_list");
                $.getJSON('http://localhost:8080/list-files', function(data) {
                    data.forEach(function(file) {
                        $(image_list).append($('<a href="http://localhost:8080/uploaded_files/' + file + '">' + file + '</a>'));
                    })
                });
            }
        </script>
    </body>
</html>

以下是javascript完整代码project/server.js（编辑 - 经Oorja回答后）

var express = require('express'),
    multer = require('multer'),
    bodyParser = require('body-parser'),
    path = require('path')
    fs = require('fs');

var app = express();

var imageStorage = multer.diskStorage({
    destination: function(req, file, callback) {
        callback(null, './uploaded_files');
    },

    filename: function(req, file, callback) {
        callback(null, file.fieldname + '_' + Date.now() + '_' + file.originalname);
    }
});

var upload = multer({
    storage: imageStorage,
    fileFilter: function(req, file, callback) {
        console.log('Checking file extension...');
        var extension = path.extname(file.originalname);
        if (extension == '.jpg' || extension == '.png' || extension == '.jpeg') {
            console.log('Extension looks good!');
            callback(null, true);
        } else {
            callback('Please upload images only!', false);
        }
    }
}).array('image');

app.use(bodyParser.json());
app.use('/uploaded_files', express.static('./upload_files'));

// define http methods handlers
app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname, 'public', 'index.html'))
});

app.get('/list-files', function(req, res) {
    var files = fs.readdirSync('./uploaded_files');
    res.json(files);
})

app.get('/api/queryImages', function(req, res) {
    var imageName = req.query.image_name
    console.log(imageName);
    res.sendFile(path.join(__dirname, 'uploaded_files', imageName));
});

app.post('/api/uploadImages', function(req, res) {
    upload(req, res, function(err) {
        if (err) {
            console.log(err);
            return res.end('Something went wrong!');
        }
        console.log('Upload successful!')
        res.send('Successfully uploaded images!');
    });
});

app.listen(port=8080, function(a) {
    console.log('Listening to port ' + port);
});

javascript正常/list-files因为我可以看到我的控制台中的文件列表，或者我是否转到/list-files网址，但是，我无法弄清楚如何将输出发送到前端 - 我我们不知道如何连接它们 - 所以当我点击button下的div class="dropdown"时，它们将显示为列表<a>元素。

有人可以指出我正确的方向，甚至更好，举个例子吗？

提前谢谢！

修改来自files以上的javascript的/list-files输出如下

[ '.DS_Store',
  'Screen Shot 2018-06-02 at 2.15.10 pm.png',
  'aaa.png',
  'bbb.png',
  'ccc.png',
  'ddd.png',
  'eee.png' ]

另外，为了澄清，我正在使用Express框架来构建此web api。

Answer 1

准备好文件列表后，为其创建API端点。说，/get-files。假设您正在使用express作为node.js服务器，您可以这样做 -

const express = require('express');
const fs = require('fs');

const app = express();
// Makes your upload_files directory public. Don't use this in a real app. 
// Create a separate route to serve file data. This is just for brevity of code.
app.use('/upload_files', express.static('./upload_files'))

app.get('/get-files', (req, res) => {
    // your logic of getting file names
    const files = fs.readdirSync('./upload_files');
    res.json(files);
});

app.listen(3000); // start a server at localhost:3000

现在，在您的前端，您可以打开XHR GET请求来获取node.js服务器上的文件名，如下所示 -

function show_list() {
    var image_list= document.getElementById('image_list');
    // Assuming you have jQuery as well...
    $.getJSON('http://localhost:3000/get-files', function (data) {
        data.forEach(file => {
            // Do something with the file name 
            $(image_list).append($('<a href="http://localhost:3000/upload_files/' + file + '">' + file  + '</a>'));
        })
    });
}

您可以阅读有关Express here的更多信息。你也可以做Tamas用服务器端模板做的事情。它会将数据与HTML文件一起发送，但我怀疑这是否是您要求的。

Answer 2

您应该尝试使用EJS等模板引擎。

使用express时的示例用法：

EJS使用root中的new save_images().doPost(req, resp);文件夹作为默认的html文件，因此请创建它并将views放在那里。

0。安装EJS：index.html

1。在快递中加入EJS：npm install ejs

2。添加到您的路线：app.set('view engine', 'ejs');

3。以HTML格式获取，修改index.html（将其放在您需要的位置）：

res.render('index', {files: files});

或如果你需要它作为JS变量使用：

<% for (var i = 0; i < files.length; i++) { %>
     <a href="<%= files[i] %>"><%= files[i] %></a>
<% }; %>

More information

在前端HTML文件

2 个答案: