Hauptmenü

Werkzeuge

Kategorien

Archiv

Mehrere Dateien mit Javascript/FileReader einlesen und mit XHR an den Server senden

Erstellt in Allgemein am 12. Januar 2025 vom Daschmi

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  

}