上传图片时,显示错误: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服务器,我试图在上传文件夹上上传图像,但没有发生。请帮帮我,我从早上到晚上都在尝试
2条答案
按热度按时间1tuwyuhd1#
删除
Content-Type
头为我们解决了这个问题。参考资料和学分:https://bobbyhadz.com/blog/error-multipart-boundary-not-found-in-express-js
polhcujo2#
TL;DR尝试省略
Content-Type
头。如果没有设置,浏览器会为您设置它,它也会配置边界。引用的边界是必须在
multipart/form-data
旁边提供的边界。在你的例子中,它没有被提供。发送
multipart/form-data
类型的请求时,必须提供边界值。字符串
HTTP POST方法
在您的post请求中,您提供的内容类型没有边界,这会导致在解析内容时出错。
然而,通常最简单的解决方案是 * 完全忽略此头文件 *。在这种情况下,浏览器将为您配置此标题-它还将为您管理边界。