Question

我对节点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>。我不确定这是怎么回事。有什么建议吗？

Answer 1

首先制作另一条发回fileData的路线。

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 %}

Answer 2

您可以使用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");
}

在NodeJS中读取js文件并在客户端加载它

2 个答案: