Загрузите изображение с помощью $ http.post () внутри функции angular.forEach

Question

Я пытаюсь загрузить изображение в папку с angularjs и php.

Вот HTML-часть:

<button ng-click="addNewEvent()">Add Event</button>
<form ng-submit="addRoadmapEvent(events)">
  <span ng-repeat="event in events">
    <input type="text" ng-model="event.month" required=""/>
    <input type="file" ng-model="event.img" file-input="files" />
  </span>
  <input type="submit" value="Submit">
</form>

Функция addNewEvent() позволяет добавить еще одну строкус месяцем и изображением, так что у меня будет что-то вроде этого:

Затем, после нажатия кнопки отправки, я хочу переместить выбранные изображения в свою папку, яиспользуя для этого директиву, а затем addRoadmapEvent функцию:

$scope.addRoadmapEvent = function (events){
  var imgs = [];
  var form_data = new FormData();
  //set the data array
  angular.forEach(events, function(event){
    imgs.push(event.img);
  });

  var i = 0;
  angular.forEach(imgs, function(file){
    console.log(i++);
    form_data.append('file', file[0]);
    $http.post('House/house_action.php/roadmap_img', form_data, {transformRequest: angular.identity,headers: {'Content-Type': undefined,'Process-Data': false}}).then(function(response){  
      console.log(response.data);
    });
  }); 
};

Она работает отлично, единственная проблема - $http.post.Он публикует одну и ту же фотографию дважды:

Как мне сделать так, чтобы она отправлялась по одному?

Answer 1

Перемещение конструктора FormData внутри цикла:

$scope.addRoadmapEvent = function (events){
  var imgs = [];
  ̶v̶a̶r̶ ̶f̶o̶r̶m̶_̶d̶a̶t̶a̶ ̶=̶ ̶n̶e̶w̶ ̶F̶o̶r̶m̶D̶a̶t̶a̶(̶)̶;̶
  //set the data array
  angular.forEach(events, function(event){
    imgs.push(event.img);
  });

  var i = 0;
  angular.forEach(imgs, function(file){
    console.log(i++);
    //INSIDE the loop
    var form_data = new FormData();
    form_data.append('file', file[0]);
    $http.post('House/house_action.php/roadmap_img', form_data, {
         transformRequest: angular.identity,
         headers: {
            'Content-Type': undefined,
            'Process-Data': false
         }
    }).then(function(response){  
      console.log(response.data);
    });
  }); 
};