File Reader api无法读取多个文件并将多个文件分成几部分Javascript / Angular

Question

您好，我正在使用 File reader 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.