使用 Angular js 和 WebAPI 上传 excel 文件

Posted 2023-05-09

【中文标题】使用 Angular js 和 WebAPI 上传 excel 文件

【英文标题】：Upload excel file from using angular js and WebAPI

【发布时间】：2015-12-06 11:52:29

【问题描述】：

我正在尝试使用 Angular js 上传一个 excel 文件，将字符串数据发送到 Webapi，然后将其转换为文件。但是，当我尝试在资源管理器中打开此文件时，它说文件已损坏。

html：

<div ng-click="chooseDocument()" class="btn btn-primary ">
    <span class="glyphicon glyphicon-file"></span>&nbsp;Upload
</div>
<input id="chooseDocument" type="file" class="form-control" style="display: none;" onchange="angular.element(this).scope().addDocument(this)" />

Angular Js：

 $scope.chooseDocument = function () 
    var dialog = $("#chooseDocument");
    dialog.trigger("click");


$scope.addDocument = function (dialog) 
    var files = dialog.files;
    var reader = new FileReader();

    function readFile() 
        var file = files[0];
        reader.onloadend = function ()               
            uploadExcel(file.name, reader.result);
        
        reader.readAsDataURL(file);
    
    readFile(0);


function uploadExcel(filename, file) 
    $http.post(getUrl('api/User/UploadExcel'),  DocumentName: filename, DocumentContent: file ).then(function (response) 
      //do something

    , function (errors) 
        //do Something
    );

;

WebAPI：

 File.WriteAllBytes(@"c:\MyFile\" + document.DocumentName, Encoding.ASCII.GetBytes(document.DocumentContent));

 document.DocumentContent has value "data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,UEsDBBQABgAIAAAAIQC82fymuQEAACIIAAATAAgCW0NvbnRlbnRf..."

【问题讨论】：

我并不惊讶，你为什么不直接上传文件，是什么让你认为它是 asci 编码的文本？

尝试使用 content-type =undefined 上传。

@BenRobinson 它适用于图像，因此试图使其适用于 excel。上传文件到底是什么意思。

@JSJ 哪里可以做到这一点？

在标题属性下。

【参考方案1】：

数据是文档。文档内容是 base64 格式。 在base64**之后用逗号分割数据，**给出了适当的excel文件。

WebAPI：

File.WriteAllBytes(path, Convert.FromBase64String(document.DocumentContent.Split((",").ToCharArray())[1]));