Möchte man mit Vue/Javascript Dateien eines Uplaod Feldes einlesen und an den Server senden, so kann man folgenden Code nutzen.
const fileToBase64 = (file) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result.split(",")[1]); // Nur Base64-Daten
reader.onerror = () => reject(new Error(`Fehler beim Lesen von ${file.name}`));
reader.readAsDataURL(file);
});
}
const handle_upload = async () => {
const arFiles = Array.from(ref_file.value.files);
const base64Files = await Promise.all(
arFiles.map(async (file) => {
const base64 = await fileToBase64(file);
return { name: file.name, type: file.type, base64: base64, };
})
);
console.log(base64Files);
// ... base64Files an den Server senden mit fetch/xhr
}