lecteur fichier api ne fonctionne pas à lire plusieurs fichiers et de briser plusieurs fichiers en plusieurs parties Javascript/angulaire

Question

Salut, J'utilise le lecteur de fichiers api pour lire des fichiers multiples et de briser les fichiers en morceaux, puis le télécharger, mais le code est Fonctionne bien pour fichier unique, mais dans le cas de plusieurs fichiers, le dernier fichier est seulement de téléchargement. Voici mon code

 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); 






     } 
    }; 
    } 

Quelqu'un peut-il suggérer comment modifier le code prévu par la boucle en bas pour exécuter la configuration séquentielle lecteur s'il vous plaît.

Answer 1

Si vous tracez la valeur de that.selectedFile.name dans le gestionnaire reader.onloadend, vous constaterez que le nom de fichier reste le nom du dernier fichier. Donc, fondamentalement, chaque téléchargement écrase le précédent. Pour éviter cela, vous devez utiliser la fermeture au gestionnaire onloadend comme ci-dessous. Voir FileReader onload with result and parameter pour plus de détails.

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

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

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