使用Angular上载文件时,HttpPostedFileBase为null

本文关键字:HttpPostedFileBase null Angular 上载 文件 使用 | 更新日期: 2023-09-27 18:30:03

我将Angular与MVC结合使用。当我想上传文件时,HttpPostedFileBase为空。

html:

<input type="file" data-ng-model="fileName" onchange="angular.element(this).scope().fileInputChanged(this)">

角度:

scope.fileInputChanged = function (element) {
    scope.$apply(function (scope) {
        console.log('files:', element.files);
        _.each(element.files, function (element, index, list) {
            scope.files.push(element);
        });
    });
}
scope.uploadDocuments = function () {
    var formData = new FormData();
    // add uploaded files to form data object
    for(var i in scope.files){
        formData.append("uploadedFile", scope.files[i]);
    }
    // create xml http request object
    var httpRequest = new XMLHttpRequest();
    httpRequest.upload.addEventListener("progress", uploadProgress, false);
    httpRequest.addEventListener("load", uploadComplete, false);
    httpRequest.addEventListener("error", uploadFailed, false);
    httpRequest.addEventListener("abort", uploadCanceled, false);
    httpRequest.open("POST", "/Customer/UploadDocuments");
    // make progress bar visible
    scope.progressVisible = true;
    // send the request to the server with the form data
    httpRequest.send(formData);
}
// Private functions
function uploadProgress(event) {
    scope.$apply(function () {
        if (event.lengthComputable) {
            scope.progressValue = Math.round(event.loaded * 100 / event.total);
        }
        else {
            scope.progressValue = "Kan progressie niet berekenen";
        }
    });
}
function uploadComplete(event) {
    scope.hideForm(false);
}
function uploadFailed(event) {
    alert("Het uploaden van de documenten is mislukt.");
}
function uploadCanceled(event) {
    scope.$apply(function () {
        scope.progressVisible = false;
    });
}

MVC:

public void UploadDocuments(HttpPostedFileBase file)
{
}

以下是我的请求头的样子:

Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8,nl;q=0.6
Connection:keep-alive
Content-Length:380863
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryc67wmYYq1T5VAMlT
Cookie:ASP.NET_SessionId=rgwgky0zymvb2ppg3jozrn2s; __ngDebug=false; .ASPXAUTH=A54883879090E307D871F8293C805B3B50D1DDFAD1CE5B05D7284426D895370CBBD75D25B7012D384A69CAB265783BDA8F05B1BA02E0121814F45B39E15520EC35408F19DF3345B5DB7F5502886D8696
Host:localhost:15982
Origin:http://localhost:15982
Referer:http://localhost:15982/
User-Agent:Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.57 Safari/537.36

这里是有效载荷:

------WebKitFormBoundaryc67wmYYq1T5VAMlT
Content-Disposition: form-data; name="uploadedFile"; filename="deukjes_deur_2.jpg"
Content-Type: image/jpeg

我该怎么做才能让它发挥作用?

使用Angular上载文件时,HttpPostedFileBase为null

这是因为您给表单数据的名称为uploadedFile,但您的操作需要一个名为file的参数。更改参数名称,如下所示:

public void UploadDocuments(HttpPostedFileBase uploadedFile)
{
}
相关文章:
  • 没有找到相关文章