Wie konvertiere ich Dateien in JavaScript in Base64?

Konvertieren von Dateien in Base64 in JavaScript: Eine umfassende Anleitung

Bei der Arbeit mit Webanwendungen müssen Sie möglicherweise häufig Dateien als Teil davon übertragen Datenaustausch. Um dies nahtlos zu erreichen, ist eine Konvertierung der Dateien in das Base64-Format erforderlich. Diese rätselhafte Kodierungstechnik stellt Binärdaten mithilfe einer Teilmenge druckbarer ASCII-Zeichen dar und eignet sich daher für die Übertragung von Dateien über HTTP oder andere textbasierte Protokolle.

Problem:

Angenommen, Sie haben ein File-Objekt, das über die Methode document.querySelector abgerufen wurde:

file = document.querySelector('#files > input[type="file"]').files[0];

Ihr Ziel ist es, dieses File-Objekt in zu konvertieren eine Base64-Zeichenfolge für eine effiziente Datenübertragung.

Lösung:

Um die Datei in Base64 umzuwandeln, können Sie die von JavaScript bereitgestellte FileReader-Klasse verwenden. Mit dieser Klasse können Sie Dateiinhalte lesen und in das Base64-Format kodieren. So können Sie es implementieren:

function getBase64(file) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
        console.log(reader.result);
    };
    reader.onerror = function (error) {
        console.log('Error: ', error);
    };
}

var file = document.querySelector('#files > input[type="file"]').files[0];
getBase64(file); // prints the Base64 string

Dieser Code initialisiert die FileReader-Instanz und initiiert das Lesen der Datei als Daten-URL (DataURL). Sobald der Lesevorgang erfolgreich abgeschlossen wurde, wird das Onload-Ereignis ausgelöst und die konvertierte Base64-Zeichenfolge wird aus der Datei „reader.result“ abgerufen. Sie können diesen Base64-String nun für den Datenaustausch oder jeden anderen gewünschten Zweck verwenden.

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