Discussion :

[zskiredj]

bonjour

je veux uploader une image de react native (avec expo) vers un backend symfony via axios.

Voila le code front :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const [pickedImage, setPickedImage] = useState("");
    const submitPhoto = async () => {
    try {
    const result = await ImagePicker.launchImageLibraryAsync();
    setPickedImage(result);
 
    let formData = new FormData();
          formData.append("uploaded_image", {
            uri:
              Platform.OS === "android"
                ? pickedImage.uri
                : pickedImage.uri.replace("file://", ""),
            name: "tata.jpeg",
            type: "image/jpeg",
          });
          const response = await axios({
            method: "post",
            url: "http://192.168.1.3:8000/upload",
            data: formData,
          });
        } catch (error) {
          console.log(error)
        }
      };

voila le code backend :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
public function postImage(Request $request)
{
//... some code
$content = $request->files->get("uploaded_image");
// ... handle the image in content
}

$content contient NULL, et je lai confirmé avec le profiler symfony

j'ai essayé d ajouter un "Content-type": "multipart/form-data" dans axios, mais j'ai le message :

Missing boundary in multipart/form-data POST data

Est-ce que quelqu'un sait comment uploader l'image ?

Merci d avance

[headmax]

Salut il me semble que tu DOIT préciser le header dans ton POST axios du formulaire.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8

          const response = await axios({
            method: "post",
            url: "http://192.168.1.3:8000/upload",
            data: formData,
            headers: { "Content-Type": "multipart/form-data" },
          });

A tester...
Bon courage

[zskiredj]

bonjour,

comme je l'ai expliqué dans mon message, j'ai essayé d'ajouter un "Content-type": "multipart/form-data" dans axios, mais j'ai le message :

Missing boundary in multipart/form-data POST data

En tous cas merci pour la suggestion !

[zskiredj]

Comme je l'ai expliqué, quand j'utilise axios avec le bon header (multipart/form-data) j'obtiens le message d'erreur

Missing boundary in multipart/form-data POST data

J'ai essayé d'utiliser fetch, et ça marche maintenant !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
let response = await fetch(
        "http://192.168.1.3:8000/upload",
         {
           method: "post",
           body: formData,
           headers : {
             'Content-Type' : 'multipart/form-data;'
           }
         }
      )

c'est bizarre, mais je ne sais pas pourquoi ça marche maintenant !

[-Nikopol-]

parce qu'avec axios les headers sont dans un objet :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
{ 
    headers: {
             'Content-Type' : 'multipart/form-data;'
           } 
}

[zskiredj]

même si j'utilise un objet comme proposé, cela ne marche pas (toujours le même message d'erreur :

Missing boundary in multipart/form-data POST data)