Angular 2文件上传指令，最大并发上传限制

Question

我正在探索下面的文件上传Angular 2指令。当试图在

NG-文件选择指令

import { 
    Directive, 
    ElementRef, 
    EventEmitter, 
    Input, 
    Output, 
    HostListener 
} from '@angular/core'; 
import { Ng2Uploader } from '../services/ng2-uploader'; 

@Directive({ 
    selector: '[ngFileSelect]' 
}) 
export class NgFileSelectDirective { 

    @Input() events: EventEmitter<any>; 
    @Output() onUpload: EventEmitter<any> = new EventEmitter(); 
    @Output() onPreviewData: EventEmitter<any> = new EventEmitter(); 

    _options:any; 

    get options(): any { 
    return this._options; 
    } 

    @Input('options') 
    set options(value: any) { 
    this._options = value; 
    this.uploader.setOptions(this.options); 
    } 

    files: any[] = []; 
    uploader: Ng2Uploader; 

    constructor(public el: ElementRef) { 
    this.uploader = new Ng2Uploader(); 
    setTimeout(() => { 
     this.uploader.setOptions(this.options); 
    }); 

    this.uploader._emitter.subscribe((data: any) => { 
     this.onUpload.emit(data); 
     if (data.done) { 
     this.files = this.files.filter(f => f.name !== data.originalName); 
     } 
    }); 

    this.uploader._previewEmitter.subscribe((data: any) => { 
     this.onPreviewData.emit(data); 
    }); 

    setTimeout(() => { 
     if (this.events) { 
     this.events.subscribe((data: string) => { 
      if (data === 'startUpload') { 
      this.uploader.uploadFilesInQueue(); 
      } 
     }); 
     } 
    }); 
    } 

    filterFilesByExtension(): void { 
    this.files = this.files.filter(f => { 
     if (this.options.allowedExtensions.indexOf(f.type) !== -1) { 
     return true; 
     } 

     let ext: string = f.name.split('.').pop(); 
     if (this.options.allowedExtensions.indexOf(ext) !== -1) { 
     return true; 
     } 

     return false; 
    }); 
    } 

    @HostListener('change') onChange(): void { 
    this.files = Array.from(this.el.nativeElement.files); 
    if (this.options.filterExtensions && this.options.allowedExtensions) { 
     this.filterFilesByExtension(); 
    } 

    if (this.files.length) { 
     this.uploader.addFilesToQueue(this.files); 
    } 
    } 
} 

NG-文件选择服务

import { 
    Directive, 
    ElementRef, 
    EventEmitter, 
    Input, 
    Output, 
    HostListener 
} from '@angular/core'; 
import { Ng2Uploader } from '../services/ng2-uploader'; 

@Directive({ 
    selector: '[ngFileSelect]' 
}) 
export class NgFileSelectDirective { 

    @Input() events: EventEmitter<any>; 
    @Output() onUpload: EventEmitter<any> = new EventEmitter(); 
    @Output() onPreviewData: EventEmitter<any> = new EventEmitter(); 

    _options:any; 

    get options(): any { 
    return this._options; 
    } 

    @Input('options') 
    set options(value: any) { 
    this._options = value; 
    this.uploader.setOptions(this.options); 
    } 

    files: any[] = []; 
    uploader: Ng2Uploader; 

    constructor(public el: ElementRef) { 
    this.uploader = new Ng2Uploader(); 
    setTimeout(() => { 
     this.uploader.setOptions(this.options); 
    }); 

    this.uploader._emitter.subscribe((data: any) => { 
     this.onUpload.emit(data); 
     if (data.done) { 
     this.files = this.files.filter(f => f.name !== data.originalName); 
     } 
    }); 

    this.uploader._previewEmitter.subscribe((data: any) => { 
     this.onPreviewData.emit(data); 
    }); 

    setTimeout(() => { 
     if (this.events) { 
     this.events.subscribe((data: string) => { 
      if (data === 'startUpload') { 
      this.uploader.uploadFilesInQueue(); 
      } 
     }); 
     } 
    }); 
    } 

    filterFilesByExtension(): void { 
    this.files = this.files.filter(f => { 
     if (this.options.allowedExtensions.indexOf(f.type) !== -1) { 
     return true; 
     } 

     let ext: string = f.name.split('.').pop(); 
     if (this.options.allowedExtensions.indexOf(ext) !== -1) { 
     return true; 
     } 

     return false; 
    }); 
    } 

    @HostListener('change') onChange(): void { 
    this.files = Array.from(this.el.nativeElement.files); 
    if (this.options.filterExtensions && this.options.allowedExtensions) { 
     this.filterFilesByExtension(); 
    } 

    if (this.files.length) { 
     this.uploader.addFilesToQueue(this.files); 
    } 
    } 
} 

当提供的选项：

this.options = { 
     url: 'http://api.ng2-uploader.com:10050/upload', 
     filterExtensions: true, 
     allowedExtensions: ['image/png', 'image/jpg'], 
     calculateSpeed: true, 
     multiple:true, 
     maxUploads:1, 
     data: { 
     userId: 12, 
     isAdmin: true 
     }, 
     customHeaders: { 
     'custom-header': 'value' 
     }, 
     authToken: 'asd123b123zxc08234cxcv', 
     authTokenPrefix: 'Bearer' 
    }; 

来源：https://github.com/jkuri/ng2-uploader

我想允许多个文件上传，但1个文件应该一个一个上传。

目前在上述指令中似乎没有对此进行任何处理。任何人都可以指导在服务中应该在何处以及如何施加此限制。

Answer 1

我认为你只需要使用普通的HTML multiple属性像

<input type="file" ngFileSelect [options]="options" multiple> 

Answer 2

我会建议你使用ng2-file-upload指令。它通过将它们添加到队列中，然后在单独的请求中上传每个文件来执行多个文件上载。