如何使用 HTML 输入文件导入 excel 文件并在 Node.js 中读取文件内容（如何将完整路径发送到 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，但它们都不起作用。我该如何解决这个问题？

Answer 1

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

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

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

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

Answer 2

为什么要发送文件路径？将文件添加到 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 3

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