FormData ne peut pas arriver au backend

Question

Je suis en train de créer une section d'équipe, qui est un formulaire dynamique. Vous pouvez insérer autant de membres d'équipe que vous le souhaitez, et cela inclut, "memberName", "memberDescription", "memberJobTitle", "images".

Je ne comprends vraiment pas pourquoi mais quelque chose ne va pas dans le frontend, d'une manière ou d'une autre le fichier n'arrive pas au backend, lorsque je soumets pour créer un membre de l'équipe, je reçois ce message :

message: "Impossible de lire les propriétés de undefined (lecture de 'path')

Cependant,

1. Lorsque j'essaie de télécharger un fichier pour un membre d'équipe sur Postman avec form-data, cela fonctionne. Donc, je suppose que le problème ne vient pas du backend.

   team[0][memberName]: "Lala" team[0][memberJobTitle]: "Lala" team[0][images][0]: "image.jpg" team[0][memberDescription]: "Lala"

2. Dans le frontend, je peux voir le fichier que j'ai téléchargé lorsque je soumets dans console.log(values).

   team: Array(1) 0: images:Array(1) 0: FileList {0: File, length: 1} length: 1 [[Prototype]]: Array(0) memberDescription: "travailler avec nous depuis 5 ans" memberJobTitle: "marketing" memberName: "Jane Doe"

3. Si je journalise console.log("append image: ", item.images[0]);, cela me montre également un FileList.

   FileList {0: File, length: 1} 0: File {name: 'real-estate-logo-template_1195-19.jpg.webp', lastModified: 1672667306966, lastModifiedDate: Mon Jan 02 2023 13:48:26 GMT+0000 (Western European Standard Time), webkitRelativePath: '', size: 9894, …} length: 1

submitHandler

const submitHandler = async (values) => {
    const formData = new FormData();

    // append other fields

    values.team = values.team || [{}];

    values.team.forEach((item, index) => {
      formData.append(`team[${index}][memberName]`, item.memberName || "");
      //append other team fields

      formData.append(`team[${index}][images][0]`, item.images[0]);

      console.log("append image: ", item.images[0]);
    });

    await axios({
      method: "POST",
      url: `http://localhost:8080/api/pages/${pageId}/aditional-section`,
      data: formData,
      headers: {
        "Content-Type": "multipart/form-data",
        Authorization: "Bearer " + localStorage.getItem("token"),
      },
    })
      .then((res) => {
        console.log(res);
      })
      .catch((res) => {
        console.log(res);
      });

    console.log(values);
  };

Je utilise Formik pour gérer le formulaire.

    {({ insert, remove, push }) => (

        {values.team.length > 0 &&
          values.team.map((item, index) => (

                  Télécharger l'image

                {/*  */}

          ))}

            push({
              memberName: "",
              memberJobTitle: "",
              memberDescription: "",
              images: "",
            })
          }
        >
          Ajouter Membre

    )}

Answer 1

Docs MDN indique :

valeur

La valeur du champ. Cela peut être une chaîne de caractères ou Blob (y compris les sous-classes telles que File). Si rien de tout cela n'est spécifié, la valeur est convertie en chaîne de caractères.

Il semble que le type FileList n'est pas pris en charge mais le type File l'est. Essayez de faire une boucle sur le FileList et d'ajouter chaque fichier au formData comme suit.

const submitHandler = async (values) => {
    ...

    values.team.forEach((item, index) => {
      formData.append(`team[${index}][memberName]`, item.memberName || "");
      //ajoutez d'autres champs de l'équipe
      // Avant
      // formData.append(`team[${index}][images][0]`, item.images[0]);

      // Après - Faites une boucle sur les images et ajoutez le fichier
      for (let i = 0; i < item.images[0].length; i++) {
         const file = item.images[0].files[i];
         formData.append(`team[${index}][images][0]`, file);
      }

      console.log("ajouter image : ", item.images[0]);
    });

    ...
  };

---

Cela devrait fonctionner, à condition que votre backend soit configuré pour recevoir plusieurs fichiers.