带文件的$ http.post angularJS。 ASP.NET

Question

尝试使用此示例之一 - Angularjs $http post file and form data

例如这个

 $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中有一个错误。我在我的帖子请求中删除了标题，它转到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召唤你可以在Content-Type之前将undefined标题设置为transformRequest

$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; }
    //..
}