如何解决如何创建用户上传头像功能
我在我的项目中使用 nextjs 和 cloudinary-react:
这是我上传功能的代码库:
const uploadImage = () => {
const formData = new FormData();
formData.append("file",imageSelected);
formData.append("upload_preset","teammateme");
axios.post("https://api.cloudinary.com/v1_1/teammateme/image/upload",formData)
.then((response) => {
console.log(response);
});
};
return (
<Card className="profile--card_container">
<CardContent>
{picture ? (
<div>
<Avatar
src={picture}
alt="Avatar"
className="avatar--profile_image"
/>
<input
type="file"
onChange={(event) => {
setImageSelected(event.target.files[0]);
}}
/>
<button onClick={uploadImage}>Submit</button>
</div>
) : (
<AccountCircleIcon className="avatar--profile_image" />
)}
)
如何制作用户头像的上传图片?
解决方法
如果我理解正确,您正在尝试在成功上传到 Cloudinary 后返回 secure_url
。为此,您可以替换:
axios.post("https://api.cloudinary.com/v1_1/teammateme/image/upload",formData)
.then((response) => {
console.log(response);
});
与:
axios.post("https://api.cloudinary.com/v1_1/teammateme/image/upload",formData)
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data);
var url = data.secure_url;
});
这将记录完整的 Cloudinary 响应,然后专门在 secure_url
变量中提取 url
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。