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

问题描述 投票:1回答:1

正在上传图像时,显示错误:多部分:在节点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创建或将图像数据附加到主体中,然后将数据发送到要尝试上传的node js服务器图片在上传文件夹中,但没有发生。请帮助我,从早上和晚上开始我都在尝试

node.js reactjs react-native express react-native-image-picker
1个回答
0
投票

我有相同的错误。您找到解决方案了吗?如果可以,您可以发布后端代码吗?谢谢

© www.soinside.com 2019 - 2024. All rights reserved.