Question

我正在使用nervgh的角度文件上传https://github.com/nervgh/angular-file-upload/wiki/Module-API。

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

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

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

Answer 1

问题相当陈旧，但由于文档对我没有多大帮助，我想在此处记下我的解决方案：

这就是我的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对象。非常hacky，但这是我让它运行的唯一方式。

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

1 个答案: