我对 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 url，但是，我无法弄清楚如何将输出发送到前端 - 我不知道如何连接它们 - 所以当我单击 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 的框架。
最佳答案
准备好文件列表后，为其创建一个 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 文件一起发送数据，但我怀疑这是否是您所要求的。
关于javascript - 在前端 HTML 文件中显示 fs.readdirSync() 的输出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50663961/