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指令。它通過將它們添加到隊列中，然後在單獨的請求中上傳每個文件來執行多個文件上載。