如何创建用户上传头像功能

Question

我在我的项目中使用 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" />
          )}
)

如何制作用户头像的上传图片？

更新控制台：

Answer 1

如果我理解正确，您正在尝试在成功上传到 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 响应，然后在 url 变量中提取 secure_url。