从angularjs将文件发布到web api时，内容类型为null

我正在尝试从AngularJs应用程序中使用web api上传文件。下面是我的代码

app.controller（'RFCController'，['$scope'，'$http'，函数（$scope，$http）{
$scope.getFileDetails=函数（e）{
$scope.files=[]；
$scope.$apply（函数（）{
//将文件对象存储在数组中。
对于（var i=0；i

图像文件
提交
上载由创建的对象时，必须将内容类型标题设置为
未定义

$scope.uploadFiles = function () {

    //FILL FormData WITH FILE DETAILS.
    var data = new FormData();

    data.append("uploadedFile", $scope.files[0]);

    $http.post('../api/RFCService/upload', data, {
        //headers:{'Content-Type':'multipart/form-data'}
        //IMPORTANT
        headers:{'Content-Type': undefined }
    }).then(function (response) {
        alert("sucess!");
        },
        function (response) {
            alert("error!");
        });

}

通常，$http服务使用内容类型
application/json
覆盖。通过将标题设置为
未定义
，将自动设置带有零件边界的内容类型标题。强制使用没有内容边界的内容类型会导致问题


更好的方法是直接发送文件
对于内容类型
多部分/表单数据
而言，数据是可压缩的，这增加了33%的额外开销。直接发送文件即可：

$scope.uploadFiles = function () {

    //FILL FormData WITH FILE DETAILS.
    //var data = new FormData();

    //data.append("uploadedFile", $scope.files[0]);

    //USE file directly
    var file = $scope.file[0];

    return $http.post('../api/RFCService/upload', file, {
        //headers:{'Content-Type':'multipart/form-data'}
        //IMPORTANT
        headers:{'Content-Type': undefined }
    }).then(function (response) {
        console.log("success!");
        return response;
    }).catch(function (errorResponse) {
        console.error("error!");
        throw errorResponse;
    });
}

接受并为它们创建适当的头

还请注意，这些示例在日志记录后从和正确地返回承诺


AngularJS的旧版本
默认情况下，AngularJS$http服务设置内容类型头并将JavaScript对象序列化为JSON UTF-8字符串。$http服务的现代版本检测Blob、文件和FormData对象，并跳过序列化。对于旧版本，请使用
transformRequest:[]
配置以防止序列化

$scope.uploadFile = function (url, file) {

    var config = {
        headers: { 'Content-Type': undefined },
        tranformRequest: []
    };

    return $http.post(url, file, config)
      .then(function (response) {
        console.log("success!");
        return response;
    }).catch(function (errorResponse) {
        console.error("error!");
        throw errorResponse;
    });

}

最后，这就是我如何让它工作的。请参阅下面angularjs的调用


$scope.uploadFiles=函数（）{
//用文件详细信息填充FormData。
var data=new FormData（）；
var file=$scope.files[0]；
data.append（“uploadedFile”，file）；
$http({
url:“../api/RFCService/upload”，
方法：“Post”，
数据：数据，
标题：{“内容类型”：未定义}，
转换请求：angular.identity
}).然后（功能（响应）{
警惕（“成功！”）；
},
功能（响应）{
警报（“错误！”）；
});
}
如果将内容类型用作“多部分/表单数据”；charset=utf-8'？@Gonzalo。-是的，我试过了。还是一样的问题。谢谢回复。我尝试直接发送文件并将内容类型设置为未定义。但仍然面临同样的问题。内容类型在服务器端显示为null并返回相同的错误。我是否需要对Web Api方法进行任何更改以使其正常工作？请看一下WebAPI方法。这是我现在如何让它工作的。下面是代码。将代码发布为答案，但会将您的帖子标记为答案。更新了AngularJS旧版本的答案。您使用的是什么版本的AngularJS？只有V1.3.7之前的版本需要覆盖FormData对象的transformRequest。Blob对象的V1.3.0-beta.3之前版本。V1.0.0-rc2之前的版本，用于文件对象。