angular-file-upload：多文件上传中每个文件的附加属性/选项？答案

【问题标题】：angular-file-upload: additional properties/options to each file in a multi-file upload?angular-file-upload：多文件上传中每个文件的附加属性/选项？
【发布时间】：2015-07-06 12:44:25
【问题描述】：

我正在使用 nervgh 的 angular-file-upload，https://github.com/nervgh/angular-file-upload/wiki/Module-API。

在进行多文件上传时，有没有办法使用 angular-file-upload 并允许每个文件附加属性？

我使用他们的图片示例开始：http://nervgh.github.io/pages/angular-file-upload/examples/image-preview/

尝试为用户可以设置的每个文件添加一个布尔值，然后当它被拾取时我在服务器端使用它。

【问题讨论】：

标签： angular-file-upload

【解决方案1】：

您可以使用Properties 部分中显示的formData 属性将您需要的任何内容发送到服务器。

formData {Array}：与文件一起发送的数据。

如果您在服务器端使用 PHP，我认为 post 可以帮助您。

【讨论】：

【解决方案2】：

这个问题相当老了，但由于文档对我的帮助不大，我想在这里记下我的解决方案：

这就是我的 html 的样子（寻找“选项”）：

<div ng-controller="UploadCtrl2" nv-file-drop="" uploader="uploader" filters="customFilter">
    <div class="progress progress-xs margin-top-5 margin-bottom-20">
        <div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div ng-show="uploader.isHTML5">
                <div class="well my-drop-zone" nv-file-drop=""  options="{formData:[{folder:'attachments'}, {recordid:0}]}" uploader="uploader">
                    Dateien hierher ziehen.
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <span class="btn btn-primary btn-o btn-file margin-bottom-15"> Dateien auswählen
                    <input type="file" nv-file-select="" options="{formData:[{folder:'attachments'}, {recordid:0}]}" uploader="uploader" multiple  />
                </span>
        </div>
    </div>
</div>

这是我的控制器（查找“fileItemOptions”）：

app.controller('UploadCtrl2', ['$rootScope', '$scope', 'FileUploader', 'Store',
function ($rootScope, $scope, FileUploader, Store) {
    var fileItemOptions = {};
    var uploader = $scope.uploader = new FileUploader({
        url: $rootScope.app.api.url + '/?c=uploads&a=set&authToken=' + encodeURIComponent(Store.get('X-Xsrf-Token')),
    });
    // FILTERS
    uploader.filters.push({
        name: 'customFilter',
        fn: function (item/*{File|FileLikeObject}*/, options) {
            if(options) fileItemOptions = options;
            return this.queue.length < 10;
        }
    });
    uploader.removeAfterUpload = true;
    // CALLBACKS
    uploader.onAfterAddingFile = function (fileItem, options) {
        //console.info('onAfterAddingFile', fileItem);
        if(fileItemOptions.formData) {
            fileItem.formData = fileItemOptions.formData;
        }
    };
    uploader.onAfterAddingAll = function (addedFileItems) {
        setTimeout(function () {
            console.log(uploader);
            uploader.uploadAll();
        }, 500);
    };
    uploader.onCompleteAll = function () {
        $scope.$parent.run.uploadComplete();
        fileItemOptions = {}; // cleanup
    };
}]);

每当添加文件时，自定义过滤器都会将选项对象存储在全局变量中。回调“onAfterAddingFile”将读取该变量并将其读取到 fileItem 对象。很老套，但这是我让它运行的唯一方法。

【讨论】：