Wie konvertiere ich einen Blob in einen Base64-String in JavaScript?

Blob mit FileReader in Base64 konvertieren

In JavaScript kann es vorkommen, dass Sie ein Blob-Objekt konvertieren müssen, das normalerweise ein Bild oder eine Datei darstellt. zu einem Base64-String. Diese Konvertierung ist erforderlich, wenn Sie die Binärdaten in einem Textformat speichern oder übertragen müssen, beispielsweise um sie über HTTP zu senden oder in einer Datenbank zu speichern.

Das von Ihnen bereitgestellte Code-Snippet unter Verwendung der Blob- und FileReader-APIs zielt darauf ab, diese Konvertierung durchzuführen. Sie haben jedoch ein Problem erwähnt, bei dem die Quellvariable null zurückgibt.

Verwenden von FileReader für Blob zu Base64

Die Lösung für dieses Problem besteht darin, den Code so zu ändern, dass FileReader korrekt verwendet wird. Hier ist der aktualisierte Code:

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

In diesem Code wird die Methode readAsDataURL() verwendet, um die Blob-Daten als Base64-String zu kodieren. Der onloadend-Ereignishandler wird dann verwendet, um die Base64-codierten Daten aus der Eigenschaft „reader.result“ abzurufen.

Einfachere Methode mit jQuery

Alternativ können Sie jQuery für eine prägnantere Implementierung in Betracht ziehen:

$.ajax({
  url: "upload.php", // URL to submit the form
  type: "POST",
  data: {
    image: blob
  },
  beforeSend: function(xhr) {
    // Encode the blob as a base64 string
    var reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = function() {
      // Append the encoded data to the form data
      var data = reader.result;
      xhr.setRequestHeader("Image-Data", data);
    }
  }
});

Beachten Sie, dass die jQuery-Ajax-Methode das Senden der codierten Base64-Zeichenfolge zusammen mit den Formulardaten übernimmt. Dies macht es zu einem bequemeren Ansatz.

Entfernen der Daten-URL-Deklaration

Es ist wichtig zu beachten, dass das Ergebnis des Blobs eine Daten-URL-Deklaration vor den Base64-codierten Daten enthält. Um nur die Base64-codierte Zeichenfolge abzurufen, können Sie den folgenden Code verwenden:

var base64String = base64data.substring(base64data.indexOf(',') + 1);

Das obige ist der detaillierte Inhalt vonWie konvertiere ich einen Blob in einen Base64-String in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!