Node.js 用户尝试使用常规方式上传和处理文件 javascript+html

Question

到目前为止，我所有的 Node.js 代码都可以无缝地用于我一直从事的任何 javascript+HTML 项目。因此，我形成了一个错误的概念，认为 Node.js 和原版 Javascript+HTML 之间存在一对一的对应关系。当我试图在网页中使用 Node 的 'fs' 模块来读取和处理文件时，打破了这个想法。

我上传文件的节点方式是这样的：

var fs = require("fs");
function processFile(filePath){
  var fileText = fs.readFileSync(filePath) + '';
  var linesOfText = fileText.split("\n");
  return linesOfText;
}

这将允许我以流的形式读取文件，我会立即将其转换为数组，然后我可以以我想要的任何方式处理它。

但是，当我尝试使用普通的 HTML+Javascript 文件上传方式来表达内容时，我遇到了麻烦。我可以很好地上传文件，但我无法处理它们。

<input type="file" id="myFile" multiple size="50" onchange="myFunction()">
<script>
function myFunction(){
  var text = document.getElementById("myFile");
  var textArray = text.split("/n");
}
</script>
TypeError: text.split is not a function. (In 'text.split("\n")', 'text.split' is undefined)

我想我面临的问题之一是我不知道上传文件后我正在处理什么类型的数据，而在 Node.js 我能够处理文件和转换为 array/strings 没问题。

感谢帮助。

谢谢，那库尔

Answer 1

您可以使用 FileReader API 在浏览器中访问上传文件的内容：

      function myFunction() {
        var file = document.getElementById("myFile").files[0];
        if (file) {
          var reader = new FileReader();
          reader.readAsText(file, "UTF-8");
          reader.onload = (e) => {
            var text = e.target.result;
            var textArray = text.split("/n");
          };
          reader.onerror = (e) => {
            console.log("error reading file");
          };
        }
      }

Node.js 用户尝试使用常规方式上传和处理文件 javascript+html

Node.js user trying to upload and process files the vanilla way using regular javascript+html

html

javascript

upload

file

node.js