JS konvertieren Blob-URL zu Base64-Datei

Question

Es gibt den folgenden Code ein:

console.log(blob); 
var reader = new window.FileReader(); 
reader.onloadend = function() {    
    console.log(reader.result); 
}; 
reader.readAsDataURL(blob); 

Blob ist 'blob:http://localhost:3000/e3c23a22-75b1-4b83-b39a-75104d1909b9' und ich habe die folgende Fehlermeldung anzeigt:

TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'. 

Wie kann ich diesen Fehler zu beheben und wandle Blob in Base64-kodiertes Bild um? Danke im Voraus!

Answer 1

Haben Sie nicht Ihren Code über die xhr hier, aber es ist wahrscheinlich, dass Sie responseType nicht richtig einstellen. Versuchen Sie xhr.responseType = 'blob' vor xhr.send().

Auch abgesehen von FileReader verwenden, können die folgenden mehr einfach sein:

xhr.onreadystatechange = function(){ 
    if (this.readyState == 4 && this.status == 200){ 
     var url = window.URL || window.webkitURL; 
     img.src = url.createObjectURL(this.response); 
    } 
} 

Answer 2

Sie müssen vom Uploader in der gesamten Datei-Objekt übergeben und nicht nur die Blob-URL. Mit dem gesamten Dateiobjekt meine ich den Namen, den Typ, die URL, etc.

Grundsätzlich, wenn der Uploader eine Datei im Array hat, d. H. files[0], würden Sie readAsDataURL(files[0]) übergeben.