javascript - 如何将图像上传到 Cloudinary - MERN 堆栈
问题描述
我想向 mongo DB 添加一些公司详细信息,详细信息包括公司徽标。所以我想将图片上传到 Cloudinary,然后将 URL 与其他详细信息一起保存在 Mongo DB 中。
但是我的代码似乎不起作用。当我填写表格并单击提交时,图像会上传到 Cloudinary,但不会保存在数据库中。
存储图像
const [ companyLogo, setCompanyLogo] = useState("");
const [ companyLogoURL, setCompanyLogoURL] = useState("");
提交时执行的函数
const handleCompanySubmit = (evt) => {
evt.preventDefault();
const data = new FormData()
data.append("file", companyLogo)
data.append("upload_preset", "Sprint")
data.append("cloud_name", "sprint-ccp")
fetch("https://api.cloudinary.com/v1_1/sprint-ccp/image/upload",{
method:"post",
body:data
})
.then(res => res.json())
.then(data => {
setCompanyLogoURL(data.url)
})
.catch(err => {
console.log(err)
})
//check for empty fields
if (
isEmpty(companyName) ||
isEmpty(companyAddress) ||
isEmpty(companyRegNumber) ||
isEmpty(companyContactNumber)
) {
setCompanyErrorMsg("Please Fill All The Fields");
}else {
let formData = new FormData();
formData.append('companyName', companyName);
formData.append('companyAddress', companyAddress);
formData.append('companyRegNumber', companyRegNumber);
formData.append('companyContactNumber', companyContactNumber);
formData.append('companyLogo', companyLogoURL);
setCompanyLoading(true);
addCompany(formData)
.then((response) => {
setCompanyLoading(false);
setCompanySuccessMsg(response.data.successMsg)
setCompanyData({
companyName: "",
companyAddress: "",
companyRegNumber: "",
companyContactNumber: ""
});
})
.catch((err) => {
setCompanyLoading(false);
setCompanyErrorMsg(err.response.data.errorMsg)
})
}
};
const handleCompanyLogo = (evt) => {
setCompanyLogo(evt.target.files[0])
};
前端视图
<form className="register-form" onSubmit={handleCompanySubmit} noValidate>
<label className="text-secondary">Company Logo :</label>
<input type="file" className="form-control" onChange={handleCompanyLogo}/>
//remaining input fields
<button className="btn btn-info submitButton" >Submit</button>
</form>
添加公司的api
export const addCompany = async (data) => {
const config = {
headers: {
"Content-Type": "application/json",
},
};
const response = await axios.post(
"http://localhost:5000/api/auth/clients/company",
data,
config
);
return response;
};
后台控制器
exports.addNewCompany = async(req,res)=>{
const {
companyName,
companyAddress,
companyRegNumber,
companyContactNumber,
companyLogo
} = req.body;
const company = await Company.findOne({ companyName });
if (company) {
return res.status(400).json({
errorMsg: `${req.body.companyName} already exists`,
});
}
try{
const newCompany = new Company();
newCompany.companyName = companyName;
newCompany.companyAddress = companyAddress;
newCompany.companyRegNumber = companyRegNumber;
newCompany.companyContactNumber = companyContactNumber;
newCompany.companyLogo = companyLogo;
await newCompany.save();
res.json({
successMsg: `${req.body.companyName} Company Added Successfully`
});
} catch (err) {
console.log("clientsController error - Add Company ", err);
res.status(500).json({
errorMsg: "Server Error. Please Try again",
});
}
};
我在控制台中遇到的错误是这个
clientsController 错误 - 添加公司错误:公司验证失败:companyLogo:companyLogo
需要路径。
在 ValidationError.inspect
(C:\CCP\sd08_2021\Backend\node_modules\mongoose\lib\error\validation.js:47:26)
你能帮帮我吗?
解决方案
我认为您的错误是由一个更微不足道的问题引起的:
当您使用 fetch 发送 POST 请求时,您实际上并没有等待其完成(这是一个承诺),因此if ... else {...}
语句中的代码在fetch() 终止之前执行!
setCompanyLogoURL(data.url)
尚未调用,因此formData.append('companyLogo', companyLogoURL);
设置一个空白字符串,而不是调用 Cloudinary API 返回的值。
解决方案是制作handleCompanySubmit
async,并等待fetch()
承诺完成。
推荐阅读
- flutter - 当我更改 Text 的字体大小时,CircleAvatar 边距也在发生变化,为什么会这样?
- php - 即使有时设置周界,Laravel 验证 URL 也会失败
- angular - 带有 Angular 提交的 Google 日历 API
- c - 二维结构数组->无法修复分段错误:(
- amazon-ec2 - 获取最新代码库拉入 aws ec2 实例后如何实时查看更改
- laravel - laravel 中的多个 Eloquent,结果为一个数组
- imagemagick - ImageMagick - 将 RGB 转换为 BT.601 和 BT.709 结果相同
- android - 用于 Android 错误的 Qt QML
- google-sheets - 如何在 Google 表格上导入范围 + 计数?
- reactjs - 访问渲染外部的变量