如何使用 HTML 输入文件导入 excel 文件并在 Node.js 中读取文件内容（如何将完整路径发送到 Node.js）

Posted 2023-03-05

【中文标题】如何使用 HTML 输入文件导入 excel 文件并在 Node.js 中读取文件内容（如何将完整路径发送到 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)

【发布时间】：2020-11-06 00:15:08

【问题描述】：

我对使用 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，但它们都不起作用。我该如何解决这个问题？

【问题讨论】：

角度代码的方法是get（方法：“get”，），您正在等待/收听node.js中的post。检查这是不是问题。

@Mu-Majid 感谢您的回复。不，实际上我正在尝试一些事情，那时我可能会搞砸这件事。其实是POST 因为我需要发送文件的路径

@Mu-Majid 知道如何进行这项工作吗？尝试了更多的东西，但没有运气

检查我的答案，我附上了一篇文章，逐步解释了后端和前端。

【参考方案1】：

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

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

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

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

【参考方案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 将该文件保存在任何地方之后

【讨论】：

非常感谢您的回复。我正在尝试发送路径，因为我想读取 node.js 中的 Excel 文件数据。我用file : files[0] // send your file 尝试了Angularjs Controller 方法，但在这里我会发送文件的just name 对吗？ node.js 如何知道它的位置？同样在index.js 中，当我尝试console.log(req.body) 时，我得到，这意味着它无法得到任何东西。我是否必须为file 类型更改任何内容，因为通常当我们发送data 时，我们可以直接在node.js 中访问它。我已经编辑了代码，请检查一次。

试试这个和$http.post(url, JSON.stringify(file: files[0] ))then(function (response) console.log(response)) 然后在 node.js 中使用 console.log(req.body)

我试过你提到的。我在index.js: ' file: ' 中得到以下结果。只是想确认我们是否必须在 angularjs 中以 file 或 data 发送？

【参考方案3】：

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