$http.post angularJS 与文件。 ASP.NET

Question

尝试使用此示例之一 -

例如这个

 $scope.createPost = function () {
        $http({
            method: 'POST',
            url: '/api/Blog/create-post/',
            headers: {'Content-Type': 'multipart/form-data'},
            data: {
                Headline: $scope.Headline,
                BodyText: $scope.BodyText,
                ImgPost: $scope.fileAdress
            },
            transformRequest: function (data, headersGetter) {
                var formData = new FormData();
                angular.forEach(data, function (value, key) {
                    formData.append(key, value);
                });

                var headers = headersGetter();
                delete headers['Content-Type'];


                return formData;
            }
        })
        .then(function onSuccess(response){
            if(response.data = "Ok"){
                $window.location.reload();
            }
        })


        .catch(function onError(response) {
            console.log("Error")
        });

    }

但是我在控制台中有一个错误（内部服务器错误）500。我在我的 post 请求中删除了 header 并且它转到 api 控制器但参数为空；

如果我修改为如下所示的这种情况，但没有文件，它工作正常。

 $scope.createPost = function () {
        $http({
            method: 'POST',
            url: '/api/Blog/create-post/',
            data: {
                Headline: $scope.Headline,
                BodyText: $scope.BodyText,
            },

        })
        .then(function onSuccess(response){
            if(response.data = "Ok"){
                $window.location.reload();
            }
        })


        .catch(function onError(response) {
            console.log("Error")
        });
    }

我得到了这个结果

我必须如何修改我的 $http.Post 才能使用文件？

我的 PostViewModel

public class PostViewModel
{
    [ScaffoldColumn(false)]
    public int Id { get; set; }

    [ScaffoldColumn(false)]
    public string User { get; set; }


    [StringLength(100, MinimumLength = 1)]
    public string Headline { get; set; }


    [StringLength(1000, MinimumLength = 1)]
    public string BodyText { get; set; }

    [ScaffoldColumn(false)]
    public DateTime? Date_Time { get; set; }

    public IList<IFormFile> ImgPost { get; set; }

    public IList<int> fileAdress { get; set; }
}

Answer 1

首先检查 $scope.fileAdress 是否设置为实际文件。在 $http 调用中，您可以在 transformRequest

之前将 Content-Type header 设置为 undefined

$http({
    method: 'POST',
    url: '/api/Blog/create-post/',
    headers: {'Content-Type': undefined }, //set undefined here
    data: {
        Headline: $scope.Headline,
        BodyText: $scope.BodyText,
        ImgPost: $scope.fileAdress
    },
    transformRequest: function (data, headersGetter) {
        var formData = new FormData();
        angular.forEach(data, function (value, key) {
            formData.append(key, value);
        });

        return formData;
    }
})

您还需要将操作参数属性更改为 [FromForm] 或者您可以完全删除它

[HttpPost]
[Route("create-post")]
public async Task<object> PostSaveOnFile(PostViewModel model)

这足以让它发挥作用。如果您需要传递单个文件，请考虑更新您的模型以包含 IFormFile 而不是 IList<IFormFile>

public class PostViewModel
{
    //..
    public IFormFile ImgPost { get; set; }
    //..
}

$http.post angularJS 与文件。 ASP.NET

$http.post angularJS with files. ASP.NET

http-post

asp.net-web-api

angularjs

asp.net-core