通过 axios 将图像从本机应用程序上传到 symfony 后端

Question

我想通过 axios 将图像从 React Native 应用程序上传到 symfony 的后端。

前端代码如下：

    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)
        }
      };

这里是 Symfony 后端的代码：

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

如我所见，$content 为 NULL。为了确认这一点，我附上了 symfony 分析器的屏幕截图。

我试图在 axios 调用中添加“Content-type”：“multipart/form-data”，但我得到：“Missing boundary in multipart/form-data POST data”

有谁知道我如何正确地将图像从 React Native 上传到 Symfony？

提前致谢。

编辑 1：使用 POSTMAN 时，后端的工作方式如下面两张图片所示：

POST人工请求：

分析器 SYMFONY：

Answer 1

我认为你的 back-end 端有一个 base64，然后你必须用类似的东西转换它：

    $data = base64_decode($content);
    file_put_contents($filePath, $data);

Answer 2

正如我所说，当我使用 Axios 时 header (multipart/form-data)，我收到一条消息错误：

Missing boundary in multipart/form-data POST data

.

我试过使用 fetch，现在可以用了！我不知道为什么:

let response = await fetch(
        "http://192.168.1.3:8000/upload",
         {
           method: "post",
           body: formData,
           headers : {
             'Content-Type' : 'multipart/form-data;'
           }
         }
      )

这很奇怪，但我不知道为什么现在可以了。

通过 axios 将图像从本机应用程序上传到 symfony 后端

upload image from react native app to symfony backend via axios

react-native

symfony

post

axios

multipartform-data