[英]Uploading Image to Cloudinary Express.js React Axios post request
我正在尝试使用React前端和Express服务器将图像上传到cloudinary。 问题是我无法正确将请求图像发布到我的快递服务器。
这是我准备稍后发送图像的方式:
var data = new FormData();
console.log(event.target.files[0]) // this prints FileObject succesfully
data.append('image', event.target.files[0]);
console.log(data) // this prints {} but i guess its natural since its FormData ??
this.imageToUpload = data;
这是我发布请求的方式:
axios.post('/api/courses/uploadImage',this.imageToUpload, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then( (response) => {
alert(JSON.stringify(response));
})
.catch(function (error) {
console.log(error);
});
现在在服务器端, req.body
为空。
router.post("/courses/uploadImage",(req,res,next)=>{
console.log(req.body) // empty
var image = req.body;
cloudinary.uploader.upload(image, function(error, result) { console.log(result) });
})
还我应该怎么真正把以(在这种情况下图像)的第一个参数uploader.upload
?
不是直接的答案,但是如果您愿意,Cloudinary还提供了一种直接从前端上传图像的方法,从而节省了一些工作。 您可以在这里进一步阅读 。
我已经使用了他们的小部件,并且可以轻松地集成到几乎所有应用程序中。
你可以这样 我已经在我的项目中成功尝试过。
function upload(){
var data = new FormData();
data.append('image', event.target.files[0]);
data.append('username', 'Saurabh'); //if you have other fields
axios.post('/api/courses/uploadImage', data,
headers: {
//your headers
})
.then( (response) => {
alert(JSON.stringify(response));
})
.catch(function (error) {
console.log(error);
});
}
在您的快速路线中,您可以简单地获得如下所示的值
router.post('/api/courses/uploadImage', upload.single('image'), async(req,res, next) => {
const result = await cloudinary.v2.uploader.upload(req.file.path);
console.log(req.body.username); //Saurabh
//your logic
});
我通过使用html5 codepen示例将图像直接从客户端上传到cloudinary解决了我的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.