$ http.post angularJS с файлами.ASP.NET - PullRequest
Новая
       24

$ http.post angularJS с файлами.ASP.NET

0 голосов
/ 23 февраля 2019

Попробуйте использовать один из следующих примеров - Angularjs $ http файл поста и данные формы

, например, это 

 $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, но с нулевыми параметрами;

enter image description here

Если я изменяю этот случай, показанный ниже, но без файлов, он работает хорошо. 

 $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")
        });
    }

и яиметь такой результат

enter image description here

Как мне изменить мой $ http.Пост, чтобы он работал с файлами?

Мой 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; }
}

1 Ответ

0 голосов
/ 02 марта 2019

Прежде всего проверьте, установлен ли $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; }
    //..
}
...