Javascript 正在将图像上载到Cloudinary Express.js以响应Axios post请求
我正在尝试使用react前端和express服务器将图像上载到cloudinary。 问题是我无法正确地将请求映像发布到我的express服务器 以下是我准备图像以便稍后发送的方法:Javascript 正在将图像上载到Cloudinary Express.js以响应Axios post请求,javascript,reactjs,express,axios,cloudinary,Javascript,Reactjs,Express,Axios,Cloudinary,我正在尝试使用react前端和express服务器将图像上载到cloudinary。 问题是我无法正确地将请求映像发布到我的express服务器 以下是我准备图像以便稍后发送的方法: var data = new FormData(); console.log(event.target.files[0]) // this prints FileObject succesfully data.append('image', event.t
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,它还提供了一种直接从前端上传图像的方法,这样可以为你节省一些工作。你可以
我曾经使用过他们的widget,它可以非常简单地集成到几乎任何应用程序中。这不是一个直接的答案,但如果你想使用Cloudinary,它还提供了一种直接从前端上传图像的方法,这样可以为你节省一些工作。你可以
我使用过他们的小部件,几乎可以很容易地集成到任何应用程序中。我用他们的html5代码笔示例从客户端直接将图像上传到cloudinary解决了我的问题。我用他们的html5代码笔示例从客户端直接将图像上传到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
});
你可以这样做。我已经在我的项目中成功地尝试了
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
});
您是否尝试在uploader.upload中使用req.file.path?使用主体解析器也可能有帮助:req.file是未定义的。您是否尝试在uploader.upload中使用req.file.path?使用主体解析器也可能有帮助:req.file未定义