AngularJS上传和发布多个文件

所以最终，我要做的是尝试使用AngularJS将多个文件上传并发布到Django后端。我可以发布单个文件，但似乎当

文件列表

对象被放入

$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>

在这种情况下，后端在

请求.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)
}

那么为什么不能将

文件列表

附加到

表单

？如何发布文件列表

---

谢谢

我从未尝试过上述方法，这可能是一种逃避，但我想我会让你使用一些库

我会检查这两个可怕的AngularJS文件上传回购。我个人用这个

两者都支持轻松设置多文件上载

还有一个

---

既然有几十个人为你做了贡献，为什么还要投入数小时的工作呢？

首先要像前面指出的那样创建一个指令

对于变换函数。 您可以使用以下工厂：

    .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/>

---

我碰巧在当前项目中遇到了同样的问题；不客气

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

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

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