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

Question

上传图像时，它显示错误：多部分：在节点 js 服务器控制台上找不到边界

这是我的本机代码

    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!',
})

});

但在节点 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 创建或将图像数据附加到正文中，然后将数据发送到节点 js 服务器，我试图在其中上传图像上传文件夹，但它没有发生。请帮帮我，我从早上到晚上都在尝试

Answer 1

TL;DR尝试省略Content-Type标头。如果未设置，浏览器将为您设置它，并且还会配置边界。

引用的边界是您必须在 旁边提供的边界multipart/form-data。在您的示例中尚未提供。

当发送包含 type 内容的请求时，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--

MDN：HTTP POST 方法

在您的发布请求中，您提供的内容类型没有边界，这会在解析内容时导致错误。

然而，通常最简单的解决方案是完全省略此标头。在这种情况下，浏览器将为您配置此标头——它还将为您管理边界。