upload image de react native à un backend via axios

zskiredj
PHP Symfony
Javascript React

bonjour

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

Voila le code front :

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 :

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 quelqun sait comment uploader l image ?

Merci d avance

4 réponses

Orivoir21

Bonjour, je pense que tu n'envois pas un fichier dans le FormData mais un objet JSON avec une propriété uri, name et type côté serveur dans PHP le contenu ne se trouve peut-être pas dans la superglobale $_FILE mais peut-être dans $_POST

public function postImage(Request $request)
{

    var_dump($_POST);
    //... some code
    $content = $request->get("uploaded_image");
    // ... handle the image in content
}
zskiredj
Auteur

Salut,
et bien justement je veux pouvoir envoyer un fichier et non du JSON !! Si j'ajoute d autre champs dans le FormData, je les vois bien dans l objet POST. Mais impossible de voir le fichier en question dans l objet FILE
Merci pour ta suggestion

zskiredj
Auteur

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 !

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 !
Trisha

It works for me as well! Thanks for sharing!