API-интерфейс File Reader не работает для чтения нескольких файлов и разбивает несколько файлов на части Javascript/Angular

Привет, я использую API для чтения файлов, чтобы читать несколько файлов и разбивать файлы на куски, а затем загружать, но код работает нормально для одного файла, но в случае нескольких файлов загружается только последний файл. Ниже мой код

     if (this.fileList.length > 0) {
      for (let i = 0; i < this.fileList.length; i++) {  this.handleFileSelect(this.fileList[i]);
    }
    }

    handleFileSelect(file: any) {
        console.log('handlefile');
        this.maxBlockSize = 1 * 1024 * 1024;
        this.currentFilePointer = 0;
        this.totalBytesRemaining = 0;
        this.selectedFile = file;

        let fileSize: number = this.selectedFile.size;
        console.log('filesize: '+fileSize);
        console.log('Block size: '+ this.maxBlockSize);

        if (fileSize < this.maxBlockSize) {
          this.maxBlockSize = fileSize;
          console.log("max block size = " + this.maxBlockSize);
        }
        this.totalBytesRemaining = fileSize;
         console.log("totalBytesRemaining = " + this.totalBytesRemaining);
        if (fileSize % this.maxBlockSize == 0) {
          this.numberOfBlocks = fileSize / this.maxBlockSize;
        } else {
          this.numberOfBlocks = Math.floor(fileSize / this.maxBlockSize) + 1;
         // this.numberOfBlocks = (fileSize / this.maxBlockSize, 10) + 1;
        }
        console.log("total blocks = " + this.numberOfBlocks );
        var baseUrl = 'xxxxxx';
        var indexOfQueryStart = baseUrl.indexOf("?");
        this.submitUri = baseUrl.substring(0, indexOfQueryStart) + '/' + this.selectedFile.name + baseUrl.substring(indexOfQueryStart);
        console.log(this.submitUri);




        this.uploadFileInBlocks();
      }

        uploadFileInBlocks() {
        console.log('uploadfileblock');
        if (this.totalBytesRemaining > 0) {

          console.log("current file pointer = " + this.currentFilePointer + " bytes read = " + this.maxBlockSize );
          var fileContent = this.selectedFile.slice(this.currentFilePointer, this.currentFilePointer + this.maxBlockSize);
          var blockId = this.blockIdPrefix + this.pad(this.blockIds.length, 6);
          console.log("block id = " + blockId);
          this.blockIds.push(btoa(blockId));
          this.reader.readAsArrayBuffer(fileContent);
          this.currentFilePointer += this.maxBlockSize;
          this.totalBytesRemaining -= this.maxBlockSize;
          if ( this.totalBytesRemaining < this.maxBlockSize ) {
            this.maxBlockSize = this.totalBytesRemaining;
          }
        } else {
          this.commitBlockList();
        }
      }

constructor(public http: Http) {
    this.fileString;
    this.progress$ = new Observable(observer => {
      this.progressObserver = observer
    }).share();

    this.reader.onloadend = (e) => {

      if (this.reader.readyState == this.reader.DONE) { // DONE == 2
       console.log(this.reader.result);
        var uri = this.submitUri + '&comp=block&blockid=' + this.blockIds[this.blockIds.length - 1];
        var requestData = new Uint8Array(this.reader.result);
        let that = this;
        var formData = new FormData();
                let xhr = new XMLHttpRequest();
                xhr.open("PUT", uri, true)
                xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');
                xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                if (xhr.status === 200 || xhr.status === 201) {

                that.bytesUploaded += requestData.length;
                //that.progress[that.selectedFile.name] = ( that.bytesUploaded / parseFloat(that.selectedFile.size) * 100).toFixed(2);
                that.progress[that.selectedFile.name] = ((that.bytesUploaded / that.selectedFile.size) * 100).toFixed(2);
                console.log(that.bytesUploaded + '/' + that.selectedFile.size + '*' + 100);

                that.uploadFileInBlocks();
                } else {
                console.log(xhr.response);
                }
                }
                }
                xhr.upload.onprogress = (event) => {
                //this.progress[files.name] = Math.round(event.loaded / event.total * 100);

              //  console.log(that.progress);
                };
                xhr.send(requestData);






      }
    };
  }

Может ли кто-нибудь предложить, как изменить код, предназначенный для цикла внизу, чтобы выполнить настройку Reader последовательно, пожалуйста.


person Chinna M    schedule 11.07.2017    source источник


Ответы (1)


Если вы проследите значение that.selectedFile.name в обработчике reader.onloadend, вы обнаружите, что имя файла остается именем последнего файла. Таким образом, в основном каждая загрузка перезаписывает предыдущую. Чтобы избежать этого, вы должны использовать закрытие в обработчике onloadend, как показано ниже. Дополнительные сведения см. в разделе загрузка FileReader с результатом и параметром.

this.reader.onloadend = (file) => {

    return (e) => {
        console.log(file.name);
        // ...
    }

})(blob);  // The Blob or File from which to read.
person Aaron Chen    schedule 13.07.2017