Angularjs загрузка нескольких файлов в одном запросе

Question

<input type="file" ng-model="item.files" ng-change="item.onSelectFile()"/>

function MyController($scope, httpSrvc){
function Item(){
this.name = "";
this.files = [];
this.onSelectFile = function(file){
if(this.files.length < 3){
this.files.push(file);
}
}
this.onSubmit = function(){
let formData = new FormData();
formData.append("name",this.name);
for(let i = 0 ; i < this.files.length ; i++){
formData.append(`page_${i+1}`,this.files[i]);
}
httpSrvc.post(url,formData)
.then(function(res){console.log(res)})
.catch(function(err){console.log(err)})
}
}


function init(){
$scope.item = new Item();
}
}

возможно ли хранить файл в массиве? какое значение я должен установить для ng-модели?

Answer 1

Проверьте следующий код.

Обращает на себя внимание:

1. Вам необходимо прикрепить onchange событие и получить область действия с angular.element(this).scope()
2. Вам нужно обернуть ваш код внутри $scope.$apply. Это необходимо, если вы хотите отобразить список файлов в представлении. Это необходимо, поскольку массив files не отслеживается angular, поскольку он не назначен как ng-model.
3. 'Content-Type': undefined требуется в http headers

angular.module('myApp', []).controller('MyController', ['$scope', '$http',
  function MyController($scope, $http) {
    function Item() {
      this.name = "";
      this.files = [];

      this.onSelectFile = function(event) {
        $scope.$apply(() => {
          let file = event.target.files[0];

          if (this.files.length < 3) {
            this.files.push(file);
          }
        });
      }

      this.onSubmit = function() {

        let formData = new FormData();
        formData.append("name", this.name);
        for (let i = 0; i < this.files.length; i++) {
          formData.append(`page_${i+1}`, this.files[i]);
        }

        let url = "www.google.com";

        let request = {
          method: 'POST',
          url: url,
          data: formData,
          headers: {
            'Content-Type': undefined
          }
        };


        $http(request)
          .then(function(res) {
            console.log(res)
          })
          .catch(function(err) {
            console.log(err)
          })
      }
    }


    function init() {
      $scope.item = new Item();
    }

    init();

    document.querySelector('input[type="file"]').addEventListener('change', (event) => $scope.item.onSelectFile(event));
  }
]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController">
  <input type="file" ng-model="item.file" />

  <ul>
    <li ng-repeat="file in item.files">
      {{ file.name }}
    </li>
  </ul>

  <input type="button" value="Submit" ng-click="item.onSubmit()">
</div>