upload image de react native à un backend via axios

bonjour

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

Voila le code front :

Code:

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:

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 :

Citation:

Missing boundary in multipart/form-data POST data

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

Merci d avance

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

Code:

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

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 :

Citation:

Missing boundary in multipart/form-data POST data

En tous cas merci pour la suggestion !

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

Citation:

Missing boundary in multipart/form-data POST data

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

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 !

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

Code:

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

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

Citation:

Missing boundary in multipart/form-data POST data)