AngularJS Загрузите и опубликуйте несколько файлов

Question

Так что в конечном итоге то, что я делаю, пытается загрузить и отправить несколько файлов в бэкэнд Django с помощью AngularJS. Я могу опубликовать один файл, но кажется, что когда объект помещается в поле данных $http.post, бэкэнд больше не обнаруживает никаких файлов в запросе POST.

Вот что HTML выглядит следующим образом:

<form enctype="multipart/form-data" action="upload" method="POST"> 
    <div class="form-group"> 
    <span class="btn btn-info btn-file"> 
     <i class="glyphicon glyphicon-file"></i> Browse 
     <input class="btn btn-lg btn-info" name="uploadedfile" type="file" accept=".eossa" onchange="angular.element(this).scope().filesUploaded(this.files)" multiple><br/> 
    </span> 
    <button type="button" class="btn btn-success" ng-click="uploadFiles()" ng-class="{'disabled':!model.files.length}"> 
     <i class="glyphicon glyphicon-download-alt"></i> Submit 
    </button> 
    </div> 
    <pre ng-repeat="file in model.files" ng-show="file.name">{{file.name}} ({{file.size/1000}} KB) {{file.lastModifiedDate}} </pre> 
</form> 

А вот отношение JavaScript:

$scope.filesUploaded = function(files) { 
    if(files.length < 1) return; 
    $scope.model.files = files; 
    $scope.$apply(); 
}; 

$scope.uploadFiles = function(){ 
    var fd = new FormData(); 
    fd.append("file", $scope.model.files); 
    Services.uploadFiles(fd)} 

Вот мой uploadFiles служба:

uploadFiles: function(form){ 
    return $http.post("/api/file-upload/", form, {withCredentials: true, headers: {'Content-Type': undefined }, transformRequest: angular.identity}) 
    }, 

Бэкэнд не видит ничего request.FILES в этом случае; однако, если вместо добавления $scope.model.files, я добавляю $scope.model.file[0], я вижу файл в запросе на сервере. В этом случае, функция uploadFiles выглядит следующим образом:

$scope.uploadFiles = function(){ 
    var fd = new FormData(); 
    fd.append("file", $scope.model.files[0]); 
    Services.uploadFiles(fd) 
} 

Так почему не один присоединять FileList к Form? Как вы можете POST в FileList?

Благодаря

Answer 1

Сначала создайте директиву как указывалось here

.directive('filesModel', function() { 
    return { 
     restrict: 'A', 
     controller: function ($parse, $element, $attrs, $scope) { 
      var exp = $parse($attrs.filesModel); 
      $element.on('change', function() { 
       exp.assign($scope, this.files); 
       $scope.$apply(); 
      }); 
     } 
    }; 
}); 

И для функции преобразования, check this out. Вы можете использовать завод, как:

.factory('File', function() { 
     return { 
      // Define a function to transform form data 
      transformRequest: function (data, headersGetter) { 
       var fd = data ? new FormData() : null; 
       if (data) { 
        angular.forEach(data, function (value, key) { 
         // Is it a file? 
         if (value instanceof FileList) { 
          if (value.length == 1) { 
           fd.append(key, value[0]); 
          } else { 
           angular.forEach(value, function (file, index) { 
            fd.append(key + '_' + index, file); 
           }); 
          } 
         } 
         // Is it an object? 
         else if (typeof value === 'object') { 
          fd.append(key, JSON.stringify(value)); 
         } else { 
          fd.append(key, value); 
         } 
        }); 
       } 
       return fd; 
      } 
     }; 
    }) 

Тогда для службы:

uploadFiles: function(form){ 
    return $http.post("/api/file-upload/", form, {withCredentials: true, headers: {'Content-Type': undefined }, transformRequest: File.transformRequest}) 
} 

Наконец HTML:

<input type="file" files-model="<model>"/> 

Или это для нескольких файлов

<input type="file" files-model="<model>" multiple/> 

Answer 2

Я никогда не пробовал метод выше, и это может быть полицейский, но я думал, что превратит вас в некоторых библиотеках.

Я бы заказал эти две потрясающие загрузки файла AngularJS Repos. Я лично использую этот.

Обе поддержки упрощают установку нескольких файлов.

ng-file-upload

Вот другой.

angular-file-upload

Зачем ставить в часы работы, когда десятки людей внесли свой вклад и сделал это для вас?