Как загрузить объект FormData с помощью AngularJS

Я новичок в angular-js и хочу отправить данные multipart/form с изображением, и его метод $http.post() поддерживает только формат json, поэтому я хочу преобразовать объект formdata в формат json,

$scope.SubmitForm=function()
{
    url = siteurl + '/admin/' + $scope.module + '/add';

    var form=document.getElementById("addForm");
    var formData=new FormData(form);

    $http({
        url     :   url,
        method  :   "POST",
        data    :   formData,
    })
    .then(function(responseText) {                
        alert(JSON.stringify(responseText));

    //process data
    },function(){
        alert("hello from error");
    });

}

это не сработало для меня; и я попытался сделать данные в формате json для этого и отлично работает

formData={
    "first_name" :  $('#first_name').val(),
    "last_name"  :  $('#last_name'),
    //....
};

но у меня нет идеи добавить мой файл изображения в этот формат; что я должен сделать прямо здесь, чтобы получить мою работу.

Есть ли способ (функция) для преобразования объекта formdata в формат json


javascript json angularjs form-data
person Veshraj Joshi    schedule 23.11.2015    source источник
comment
Преобразование данных здесь. Но почему бы вам не использовать ng-модель, если вы находитесь в angular?   -  person Dvir    schedule 23.11.2015
comment
спасибо за предложение, но ng-модель не будет работать для файла, и у меня была новая директива для работы, но она громоздкая,   -  person Veshraj Joshi    schedule 23.11.2015

Ответы (3)


arrow_upward
1
arrow_downward

Вы действительно должны использовать ng-model при работе с формами в angular (можете ли вы предоставить свою форму в своем примере?). Он создает переменную области видимости для работы в вашем контроллере, и у вас будет двусторонняя привязка, если она уже определена... например, поскольку ваша форма отсутствует, я бы сделал что-то вроде этого, это упрощено (и не проверено )...:

<form name="myForm" ng-submit="SubmitForm()">
    Name: <input ng-model="fields.name">
    Address: <input ng-model="fields.address">
    ....
</form>

и в вашем JS-контроллере...

 $scope.submitForm = function(){    
        var data = $scope.fields,
            url = '/admin/' + $scope.module + '/add'; // I assume $scope.module is available from elsewhere...  

        $http.post(url, data).then(function(resp){
        // do stuff...

        });        
    }

Здесь есть дополнительная информация... https://docs.angularjs.org/api/ng/directive/ngModel и W3schools имеют несколько примеров: http://www.w3schools.com/angular/angular_forms.asp

person Mike Sav    schedule 23.11.2015
comment
Это не отвечает на вопрос ОП. - person Jordan Kasper; 09.03.2017

arrow_upward
1
arrow_downward

решить, поместив две строки кода, как показано ниже, в строки конфигурации $http (спасибо всем) -

      $http({
            url     :   url,
            method  :   "POST",
            data    :   formData,
            transformRequest: angular.identity, // see the angugular js documentation
            headers : {'Content-Type':undefined}// setting content type to undefined that change the default content type of the angular js
        }).then(function(responseText){
            
            alert(JSON.stringify(responseText));
            ///$scope.tablerows=$scope.totaltablerows;
            ///$scope.searchFunction();
        },function(){
            alert("hello from error");
        });

просто это работает для меня

person Veshraj Joshi    schedule 24.11.2015

arrow_upward
-1
arrow_downward

Он должен быть построен следующим образом:

  var form = document.getElementById('addForm');
  var fd = new FormData(form);
  var file = this.files[0];    
  fd.append("afile", file);
  // These way you add extra parameters
  fd.append("first_name", $('#first_name').val());
  fd.append("last_name", $('#last_name').val());

Справочный пример — из github

person Community    schedule 23.11.2015