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

Posted 2023-02-21

【中文标题】React-native node.js 显示错误：多部分：使用 react-native-image-picker 上传图像时未找到边界

【英文标题】：React-native node.js showing Error: Multipart: Boundary not found while uploading image using react-native-image-picker

【发布时间】：2020-09-09 07:03:45

【问题描述】：

上传图片时，显示错误：Multipart: Boundary not found on node js server console

这是我的反应原生代码

    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)

所以有一个按钮，我单击然后选择文件函数调用，在选择文件后它转到处理照片函数，其中正文部分 formdata 创建或将图像数据附加到正文中，然后将数据发送到我尝试的节点 js 服务器在上传文件夹上上传图像，但它没有发生。请帮帮我，我从早上到晚上都在尝试

【参考方案1】：

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

MDN: HTTP POST Method

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

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