How to import excel file using HTML Input file and read the file contents in Node.js (How to send the fullpath to Node.js)

Question

我对使用 HTML、AngularJS 和 Node.js 读取文件有点困惑。由于我有点困惑，所以我希望有人可以指导我。

我正在尝试使用 HTML 和 Angularjs 导入文件，它工作正常。我可以导入文件，但我不确定如何将整个文件发送到 Node.js。由于浏览器的限制，我无法获取文件的完整路径，所以我想知道如果我不能发送完整路径，那么如何访问 Node.js 中的 Excel 文件的数据.

这是我正在处理的代码：

<div class="custom-file">
    <input type="file" fileUploader="uploadFile" class="custom-file-input"></input>
    <label class="custom-file-label" for="inputGroupFile01">{{ FileName }}</label>
</div>

我的angularjs函数应该获取FILEPATH并将其发送到相应的NODE.JS:

app.directive('fileUploader', function() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var onChangeHandler = scope.$eval(attrs.fileUploader);
      element.on('change', onChangeHandler);
      element.on('$destroy', function() {
        element.off();
      });

    }
  };
});

app.controller('TemplatesController',function($scope){
        
    $scope.FileName     =   "Choose a Excel File";
    
    //Import an Excel File from the Local System
    $scope.uploadFile = function(event){
        var files = event.target.files;
        $scope.FileName = files[0].name;
        console.log($scope.FileName)
        $http({
            url     : "/UploadFIle",
            method  : "post",
            file    : files[0] //PATH OF THE FILE WHICH I AM UNABLE TO GET
        }).success(function(response) {
            console.log(response);
        });


    };
});

我的 index.js 将路由到相应的节点控制文件：

//Read the Excel File Data
app.post('/UploadFIle',function(req,res){
    console.log(req.body);
    ReadExcelFile.ReadExcelFileContent(req.body,function(data){
        console.log("INDEX JS");
        console.log(data);
    });
});

我的 Node.js 函数将从获得的文件中读取数据：

//ReadExcelFile.js

const xlsxFile      =   require('read-excel-file/node');

exports.ReadExcelFileContent    =   function(req,callback){
    
    var fileLocation    =   req.path; //NOT SURE HOW TO ACCESS THE FILEPATH HERE BECAUSE I WANT TO READ THE DATA HERE
    console.log(fileLocation);
}

此外，在文件上传后，我试图更改 FileName 的名称，但似乎双向数据绑定不起作用，因为在 HTML 页面中它不显示FileName 我刚刚上传的。

您好，我尝试了很多方法将读取文件的路径发送到 Node.js，但其中 none 有效。我该如何解决这个问题？

Answer 1

为什么要发送文件路径？在 UI 中将文件添加到输入标签后，它就有了你的文件。然后您想将该文件发送到 node.js

app.controller('TemplatesController',function($scope){
        
    $scope.FileName     =   "Choose a Excel File";
    
    //Import an Excel File from the Local System
    $scope.uploadFile = function(event){
        var files = event.target.files;
        $scope.FileName = files[0].name;
        console.log($scope.FileName)
        $http({
            url     : "/UploadFIle",
            method  : "post",
            file    : files[0] // send your file
        }).success(function(response) {
            console.log(response);
        });


    };
});

您也可以这样更改文件名

app.controller('TemplatesController',function($scope){
        
    $scope.FileName     =   "Choose a Excel File";
    
    //Import an Excel File from the Local System
    $scope.uploadFile = function(event){
        var files = event.target.files;
        files[0].name = 'xxxxx'  // change file name 
        $scope.FileName = files[0].name;
        console.log($scope.FileName)
        $http({
            url     : "/UploadFIle",
            method  : "post",
            file    : files[0] // send your file
        }).success(function(response) {
            console.log(response);
        });


    };
});

在你可以使用 nodejs 将该文件保存在任何地方之后

Answer 2

正如您在问题中提到的，您无法访问 OS 的文件系统，因为浏览器中的 JavaScript 无法访问文件系统。

我发现 this article 解释了如何在后端 (NodeJS/ExpressJS) 和前端 (AngularJS) 处理文件上传。

前端示例使用 ng-file-upload 模块。

现在您可以从您的磁盘中选择一个文件，将其上传并发送到您的 NodeJS 服务器，并在您的 multer 中间件运行后访问文件数据（在文章中有说明）。希望对你有帮助:).

Answer 3

因为angular只是浏览器上运行的JS代码，所以无法访问文件系统。您需要做的是将文件上传到您的后端服务器，然后服务器使用 SheetJS 和 return 之类的库解析 excel 文件，并将文件内容解析为 JSON 回客户端

How to import excel file using HTML Input file and read the file contents in Node.js (How to send the fullpath to Node.js)

How to import excel file using HTML Input file and read the file contents in Node.js (How to send the fullpath to Node.js)

javascript

node.js

angularjs

import

html-input