在NodeJS中读取js文件并将其加载到客户端
[英]Reading a js file in NodeJS and loading it on the client side
问题描述
我是Node JS的新手。 我想将文件上传到本地目录，并使用节点js读取文件。 然后，我想在客户端的index.html文件中将js文件的内容打印到<script> </script>元素中。
我有以下indext.html文件
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
</head>
<body>
<div>
<form method="post" enctype="multipart/form-data" action="/">
<input type="file" name="filename">
<input type="submit" value="upload">
</form>
</div>
<div class="vis"> </div>
</body>
<script> </script>
</html>
我也有以下节点js代码：
var express = require('express'),
app = express(),
http = require("http").Server(app).listen(8000),
upload = require("express-fileupload")
var fs = require('fs');
app.use(upload())
console.log("Listening to port 8000");
app.get("/",function(req,res){
res.sendFile(__dirname+"/index.html");
})
app.post("/", function(req,res){
if(req.files){
var file = req.files.filename,
filename = file.name;
file.mv("./uploads/"+filename,function(err){
if(err){
console.log(err);
res.send("err occurd");
}
else
{
//content of the file
var fileData= fs.readFileSync('./uploads/vis.js','utf8');
// res.send(fileData)
}
})
}
})
我可以轻松地上传文件并阅读文件内容。 我现在要做的是将文件的内容（在本例中为fileData）复制到前端的<script> 。 我不确定这怎么可能。 有什么建议吗？
2 个解决方案
解决方案1
0 2018-02-10 18:34:32
首先进行另一条发送文件数据的路由。
app.get("/data", () => {
var fileData= fs.readFileSync('./uploads/vis.js','utf8');
res.send(fileData)
})
然后在前端向您的新路由发出请求，并使用诸如Nunjucks之类的模板语言来动态填充HTML。 如果您使用Nunjucks，您的路线可能最终看起来像这样：
app.get("/data", () => {
var fileData= fs.readFileSync('./uploads/vis.js','utf8');
res.render('index', {fileData: fileData})
})
让我们继续nunjucks示例并查看配置。 在您的app.js中，配置nunjucks以查看您的views文件夹。 此配置使res.render在上述路由中起作用：
var nunjucks = require('nunjucks');
var env = nunjucks.configure('views', { noCache: true });
app.engine('html', nunjucks.render);
app.set('view engine', 'html');
然后在index.html中使用nunjucks字符串插值。 res.render将传入fileData变量：
{% block content %}
<div>{{fileData}}</div>
{% endblock %}
解决方案2
0 2018-02-10 18:37:27
您可以使用Ajax进行上传并接收上传的文件内容，而不必使用表单提交进行上传。
将<form/>替换为
<input type='file' id='upload-input' name='file'>
然后有以下内容来处理上传
var uploadInput = document.getElementById('upload-input');
uploadInput.addEventListener("change", function (evt) {
if (evt.target.files.length === 0) {
return;
}
var req = new XMLHttpRequest();
req.addEventListener("load", function reqListener() {
if (req.readyState === req.DONE) {
if (req.status === 200) {
var fileContent = JSON.parse(req.response);
document.querySelector('.vis').innerHTML = fileContent;
}
}
});
req.open("POST", "serverUrl");
}
Vue JS - 文件上传加载进度客户端
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.