时间戳

首页 > 解决方案 > React Native POST“multpart form-data”500服务器错误

node.js - React Native POST“multpart form-data”500服务器错误

问题描述

当我尝试将图像发布到我的 Node/Express 服务器（部署在 Heroku 上）时，我收到 500 服务器错误。

通过邮递员发帖工作得很好。

这是我的 React Native 代码：

upload = async uri => {
  const formData = new FormData();

  formData.append("photo", {
    uri,
    name: `photo`,
    type: `image/jpg`
  });

  const options = {
    method: "POST",
    body: formData,
    headers: {
      "Content-Type": "multipart/form-data"
    }
  };

  axios
    .post("https://prezzi-api.herokuapp.com/upload", formData, options)
    .then(response => {
      console.warn(response.data);
    })
    .catch(error => {
      console.warn("error uploading to OCR", error);
    });
};

我的 Express 路线如下所示：

router.post(
  "/",
  multer.single("image"),
  gcsMiddlewares.sendUploadToGCS,
  (req, res, next) => {
    console.log("post");
    if (req.file && req.file.gcsUrl) {
      return res.send(req.file.gcsUrl);
    }

    return res.status(500).send("Unable to upload");
  }
);

当我不使用 Postman 时，我的路线中的 console.log 不会受到影响。

标签： node.jsreact-nativeexpresspost

解决方案

我非常仔细地查看res了我的 Express 路由中的对象，以了解哪些有效和哪些无效之间的区别，以下是最终从 React Native 应用程序工作的内容：

      uploadToOCR = async uri => {
       const formData = new FormData();

       formData.append("image", {
         uri,
         name: "photo.jpg",
         type: "image/jpg",
         headers: {
           Accept: "application/json",
           "Content-Type": "multipart/form-data"
         }
       });

    const options = {
      method: "POST",
      body: formData
    };

    try {
      const response = await fetch(
        "https://prezzi-api.herokuapp.com/upload",
        options
      );
      if (response) {
        // const json = await response.json();
        // console.warn("json", json);
        console.warn("response", response);
      }
    } catch (error) {
      console.warn("error uploading to OCR", error);
    }
 };

推荐阅读