React-native node.js显示错误:Multipart:使用react-native-image-picker上传图像时未找到边界

mbskvtky  于 2023-08-04  发布在  Node.js
关注(0)|答案(2)|浏览(158)

上传图片时,显示错误:Multipart:在node js服务器控制台上未找到边界
下面是我React本机代码

const createFormData = async (photo, body) => {
  const data = new FormData();
   console.log("photoooooooooooo",photo.fileName);

  data.append("photo", {
    name: photo.fileName,
    type: photo.type,
    uri:
      Platform.OS === "android" ? photo.uri : photo.uri.replace("file://", "")
  });

  Object.keys(body).forEach(key => {
    data.append(key, body[key]);
  });
  console.log("datatyeeeeeeeeeeeeee",data);
  return data;
};

  const chooseFile = async() => {
    var options = {
      title: 'Select Image',
      customButtons: [
        { name: 'customOptionKey', title: 'Choose Photo from Custom Option' },
      ],
      storageOptions: {
        skipBackup: true,
        path: 'images',
      },
    };
    ImagePicker.showImagePicker(options, response => {
      console.log('Response = ', response);

      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
        alert(response.customButton);
      } else {
        let source = response;
        // You can also display the image using data:
        // let source = { uri: 'data:image/jpeg;base64,' + response.data };
        setfilePath(source);
        // postImage(source);
        handleUploadPhoto(source);

      }
    });
  };

   const handleUploadPhoto = async (filePath) => {

  fetch("http://192.168.43.118:3000/updateImageprofile2", {
    method: "POST",
    body: createFormData(filePath, { userId: "123"}),
     headers: {
        Accept: 'application/json',
        // 'Content-Type': 'image/jpeg',
        'Content-Type': 'multipart/form-data',
        // 'Content-Type': 'application/octet-stream'
      },
  })
    .then(response => response.json())
    .then(response => {
      console.log("upload succes", response);
      alert("Upload success!");
      // this.setState({ photo: null });
    })
    .catch(error => {
      console.log("upload error", error);
      alert("Upload failed!");
    });
};

字符串
和后端节点js

router.post("/updateImageprofile2", upload.single('photo'), (req, res,next) => {

console.log("I am in");
console.log('files', req.files)
 console.log('file', req.file)
console.log('body', req.body)
res.status(200).json({
  message: 'success!',
})


});
但在node js控制台上显示

Error: Multipart: Boundary not found
at new Multipart (C:\react\udemy_react\start\emb\auth_server2\node_modules\busboy\lib\types\multipart.js:58:11)
at Multipart (C:\react\udemy_react\start\emb\auth_server2\node_modules\busboy\lib\types\multipart.js:26:12)
at Busboy.parseHeaders (C:\react\udemy_react\start\emb\auth_server2\node_modules\busboy\lib\main.js:71:22)
at new Busboy (C:\react\udemy_react\start\emb\auth_server2\node_modules\busboy\lib\main.js:22:10)
at multerMiddleware (C:\react\udemy_react\start\emb\auth_server2\node_modules\multer\lib\make-middleware.js:33:16)
at Layer.handle [as handle_request] (C:\react\udemy_react\start\emb\auth_server2\node_modules\express\lib\router\layer.js:95:5)


因此,有一个按钮,我点击然后选择文件函数调用,选择文件后,它转到handlephoto函数,其中身体部分formdata创建或附加图像数据到身体,然后将数据发送到node js服务器,我试图在上传文件夹上上传图像,但没有发生。请帮帮我,我从早上到晚上都在尝试

1tuwyuhd

1tuwyuhd1#

删除Content-Type头为我们解决了这个问题。
参考资料和学分:https://bobbyhadz.com/blog/error-multipart-boundary-not-found-in-express-js

polhcujo

polhcujo2#

TL;DR尝试省略Content-Type头。如果没有设置,浏览器会为您设置它,它也会配置边界。

引用的边界是必须在multipart/form-data旁边提供的边界。在你的例子中,它没有被提供。
发送multipart/form-data类型的请求时,必须提供边界值。

POST /test HTTP/1.1
Host: foo.example
Content-Type: multipart/form-data;boundary="boundary"

--boundary
Content-Disposition: form-data; name="field1"

value1
--boundary
Content-Disposition: form-data; name="field2"; filename="example.txt"

value2
--boundary--

字符串
HTTP POST方法
在您的post请求中,您提供的内容类型没有边界,这会导致在解析内容时出错。
然而,通常最简单的解决方案是 * 完全忽略此头文件 *。在这种情况下,浏览器将为您配置此标题-它还将为您管理边界。

相关问题