如何将 Google oAuth 响应中的图像 url 转换为 File 对象？

Question

在我的 React 项目中，我有一个 google oAuth API，我正在从响应中检索 google 图像 url：

const userInfoResponse = await axios.get('https://www.googleapis.com/oauth2/v3/userinfo', {
   headers: { Authorization: `Bearer ${googleResponse.access_token}` }
});

const google_image = userInfoResponse.data.picture;
console.log(google_image);
//https://lh3.googleusercontent.com/a/ACg8ocKjThtaGf5USLuL2LBMBuYxfDG0gDdM-RLA_I__UvNI3p_2Hlk=s96-c

现在我想将此 URL 转换为 File Object。所以我尝试首先将其转换为 blob，然后使用 blob 构造一个文件，但没有按预期工作！

const googleImageResponse = await fetch(google_image);
const blob = await googleImageResponse.blob();
const googleImageFile = new File([blob], "profileAvatar.png");
const formData = new FormData();
formData.append('profile', googleImageFile);
formData.append('record', userResponse.data.id);

但在上面的代码中，blob 类型是

text/html

而不是图像。因此，当我将文件添加到 FormData 时，无法渲染它，因为图像不是图像类型。

---

所需解决方案：

我希望能够：

• 从 Google Response 获取图像 URL（例如

  https://lh3.googleusercontent.com/a/ACg8ocKjThtaGf5USLuL2LBMBuYxfDG0gDdM-RLA_I__UvNI3p_2Hlk=s96-c

  ）
• 将图像 URL 转换为文件
• 将文件传递给 FormData
• 将 FormData 传递给 API！

Answer 1

使用 options

 构造函数中的 

File 参数显式添加 MIME 类型。

const googleImageFile = new File([blob], 'profileAvatar.png', {
  type: blob.type || 'image/png'
});