Question

我使用此插件https://github.com/nervgh/angular-file-upload在我的项目中使用多个文件上传。

但是，我知道在jQuery文件上传插件中，您可以选择是否在一个查询中上传所有文件。

是否可以使用此插件执行此操作？我在他们的文档中什么都没找到，我看了一下代码，看起来不是原生的选择。

Answer 1

使用选项或默认行为是不可能的，我已经编辑了文件和函数uploadAll（）：

/**
 * Uploads all not uploaded items of queue
 */
FileUploader.prototype.uploadAll = function() {
    var items = this.getNotUploadedItems().filter(function(item) {
        return !item.isUploading;
    });
    if (!items.length) return;

    var that = this;

    angular.forEach(items, function(item) {
        item._prepareToUploading();
    });

    if (this.isHTML5) {
        //FILL FormData WITH FILE DETAILS.
        var data = new FormData();
        var first = true;

        angular.forEach(items, function(item) {
            console.log(item);
            data.append("files", item._file, item.file.name);

            // get formData
            that._onBeforeUploadItem(item);

            // add formData
            if (first) {
                angular.forEach(item.formData, function(obj) {
                    angular.forEach(obj, function(value, key) {
                        data.append(key, value);
                    });
                });
                first = false;
            }
        });

        // ADD LISTENERS.
        var objXhr = new XMLHttpRequest();
        objXhr.addEventListener('load', this.onCompleteAll, false);

        objXhr.upload.onprogress = function(event) {
            var progress = Math.round(event.lengthComputable ? event.loaded * 100 / event.total : 0);
            angular.forEach(items, function(item) {
                item._onProgress(progress);
            });
        };

        objXhr.onerror = function() {
            var headers = that._parseHeaders(objXhr.getAllResponseHeaders());
            var response = that._transformResponse(objXhr.response, headers);

            angular.forEach(items, function(item) {
                that._onErrorItem(item, response, objXhr.status, headers);
                that._onCompleteItem(item, response, objXhr.status, headers);
            });
        };

        objXhr.open("POST", this.url);

        angular.forEach(this.headers, function(value, name) {
            objXhr.setRequestHeader(name, value);
        });                 

        // SEND FILE DETAILS TO THE API.
        objXhr.send(data);  
    } else {
        items[0].upload();
    }

};

Answer 2

我制作了一个新功能UploadAllAtOnce()＆amp;正在为我工作。感谢 @Vincent Decaux 。我修改了一些代码 -

FileUploader.prototype.uploadAllAtOnce = function uploadAllAtOnce() {
    var items = this.getNotUploadedItems().filter(item => !item.isUploading);
    if (!items.length) return;

    forEach(items, item => item._prepareToUploading());
    var that = this;

    forEach(items, function (item) {
        return item._prepareToUploading();
    });

    if (this.isHTML5) {
        var sendable = new FormData();
        var first = true;
        forEach(items, (item) => {
            sendable.append(item.alias, item._file, item.file.name);
            // get formData
            that._onBeforeUploadItem(item);

            // add formData
            if (first) {
                angular.forEach(item.formData, function (obj) {
                    angular.forEach(obj, function (value, key) {
                        sendable.append(key, value);
                    });
                });
                first = false;
            }
        });

        // ADD LISTENERS.
        var xhr = new XMLHttpRequest();
        xhr.addEventListener('load', this.onCompleteAll, false);

        xhr.upload.onprogress = (event) => {
            var progress = Math.round(event.lengthComputable ? event.loaded * 100 / event.total : 0);
            angular.forEach(items, function (item) {
                item._onProgress(progress);
            });
        };

        xhr.onerror = () => {
            var headers = this._parseHeaders(xhr.getAllResponseHeaders());
            var response = this._transformResponse(xhr.response, headers);
            angular.forEach(items, function (item) {
                that._onErrorItem(item, response, xhr.status, headers);
                that._onCompleteItem(item, response, xhr.status, headers);
            });
        };

        xhr.onload = () => {
            var headers = this._parseHeaders(xhr.getAllResponseHeaders());
            var response = this._transformResponse(xhr.response, headers);
            angular.forEach(items, function (item) {
                var gist = that._isSuccessCode(xhr.status) ? 'Success' : 'Error';
                var method = '_on' + gist + 'Item';
                that[method](item, response, xhr.status, headers);
                // that._onCompleteItem(item, response, xhr.status, headers);
            });
        };

        xhr.onabort = () => {
            var headers = this._parseHeaders(xhr.getAllResponseHeaders());
            var response = this._transformResponse(xhr.response, headers);
            angular.forEach(items, function (item) {
                his._onCancelItem(item, response, xhr.status, headers);
                this._onCompleteItem(item, response, xhr.status, headers);
            });
        };

        xhr.open("POST", this.url, true);

        forEach(this.headers, (value, name) => {
            xhr.setRequestHeader(name, value);
        });

        xhr.send(sendable);
    } else {
        items[0].upload();
    }
};

Angular File Upload全部在一个请求中上传

2 个答案: