文件读取器API不工作读取多个文件并将多个文件分解成部分Javascript/Angular

Question

嗨，我正在使用文件读取器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); 






     } 
    }; 
    } 

任何人都可以建议如何修改由环意代码在底部执行安装阅读器依次请。

Answer 1

如果跟踪reader.onloadend处理程序中的that.selectedFile.name的值，您会发现文件名仍然是最后一个文件的名称。所以，基本上每个上传都会覆盖前一个。为避免这种情况，您应该在onloadend处理程序中使用闭包，如下所示。有关更多详情，请参阅FileReader onload with result and parameter。

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

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

})(blob); // The Blob or File from which to read.