Antworten:
Moderner ES6-Weg (asynchron / warten)
const toBase64 = file => new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
async function Main() {
const file = document.querySelector('#myfile').files[0];
console.log(await toBase64(file));
}
Main();
UPD:
Wenn Sie Fehler abfangen möchten
async function Main() {
const file = document.querySelector('#myfile').files[0];
const result = await toBase64(file).catch(e => Error(e));
if(result instanceof Error) {
console.log('Error: ', result.message);
return;
}
//...
}
Probieren Sie die Lösung mit der FileReader
Klasse aus :
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
Beachten Sie, dass dies .files[0]
ein File
Typ ist, der eine Unterklasse von ist Blob
. Somit kann es mit verwendet werden FileReader
.
Siehe die vollständige Arbeits Beispiel .
return reader.result
die getBase64()
Funktion zu verwenden (anstatt sie zu verwenden console.log(reader.result)
), weil ich die base64 als Variable erfassen möchte (und sie dann an Google Apps Script senden möchte). Ich habe die Funktion mit: aufgerufen var my_file_as_base64 = getBase64(file)
und dann versucht, auf Konsole zu drucken console.log(my_file_as_base64 )
und habe gerade bekommen undefined
. Wie kann ich die base64 einer Variablen richtig zuweisen?
Wenn Sie nach einer vielversprechenden Lösung suchen, ist dies der Code von @ Dmitri, der dafür angepasst ist:
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
var file = document.querySelector('#files > input[type="file"]').files[0];
getBase64(file).then(
data => console.log(data)
);
Aufbauend auf den Antworten von Dmitri Pavlutin und joshua.paling ist hier eine erweiterte Version, die den base64-Inhalt extrahiert (die Metadaten am Anfang entfernt) und außerdem sicherstellt, dass das Auffüllen korrekt erfolgt .
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
let encoded = reader.result.toString().replace(/^data:(.*,)?/, '');
if ((encoded.length % 4) > 0) {
encoded += '='.repeat(4 - (encoded.length % 4));
}
resolve(encoded);
};
reader.onerror = error => reject(error);
});
}
resolve(reader.result.replace(/^.*,/, ''));
. Da das Koma ,
außerhalb des Base64-Alphabets liegt, können wir alles entfernen, was bis einschließlich des Komas auftritt. stackoverflow.com/a/13195218/1935128
data:
ohne Komma gibt, also werde ich den ersten Teil so lassen, wie er ist. Ich habe die Antwort entsprechend aktualisiert.
Die JavaScript- Funktion btoa () kann verwendet werden, um Daten in eine Base64-codierte Zeichenfolge zu konvertieren
Hier sind einige Funktionen, die ich geschrieben habe, um eine Datei in einem JSON-Format zu erhalten, die leicht weitergegeben werden kann:
//takes an array of JavaScript File objects
function getFiles(files) {
return Promise.all(files.map(file => getFile(file)));
}
//take a single JavaScript File object
function getFile(file) {
var reader = new FileReader();
return new Promise((resolve, reject) => {
reader.onerror = () => { reader.abort(); reject(new Error("Error parsing file"));}
reader.onload = function () {
//This will result in an array that will be recognized by C#.NET WebApi as a byte[]
let bytes = Array.from(new Uint8Array(this.result));
//if you want the base64encoded file you would use the below line:
let base64StringFile = btoa(bytes.map((item) => String.fromCharCode(item)).join(""));
//Resolve the promise with your custom file structure
resolve({
bytes: bytes,
base64StringFile: base64StringFile,
fileName: file.name,
fileType: file.type
});
}
reader.readAsArrayBuffer(file);
});
}
//using the functions with your file:
file = document.querySelector('#files > input[type="file"]').files[0]
getFile(file).then((customJsonFile) => {
//customJsonFile is your newly constructed file.
console.log(customJsonFile);
});
//if you are in an environment where async/await is supported
files = document.querySelector('#files > input[type="file"]').files
let customJsonFiles = await getFiles(files);
//customJsonFiles is an array of your custom files
console.log(customJsonFiles);
onInputChange(evt) {
var tgt = evt.target || window.event.srcElement,
files = tgt.files;
if (FileReader && files && files.length) {
var fr = new FileReader();
fr.onload = function () {
var base64 = fr.result;
debugger;
}
fr.readAsDataURL(files[0]);
}
}
await
eine Funktion haben, die ein abgelehntes Versprechen zurückgibt, wird vom Aufruf kein Fehler zurückgegeben. es wird geworfen und du musst es fangen.