如何用JavaScript从URL下载图片并上传至Supabase Storage

问题根源 #

你代码里的核心错误是：把Blob的URL字符串（imgUrl）传给了File构造函数，导致最终上传的是一段文本（URL内容），而非实际的图片二进制数据。Supabase存储要求传入原始的Blob或File对象，而不是URL字符串。

修正后的代码 #

// 假设req是fetch返回的Response实例
const imgBlob = await req.blob();
// 用Blob直接创建合法的File对象
const imageFile = new File([imgBlob], "imageGenerator.png", { type: "image/png" });
const time = new Date().getTime();

const { data, error } = await supabase.storage
  .from('ama')
  .upload(`${time}`, imageFile, { cacheControl: '3600', upsert: false });

// 处理上传结果
if (error) {
  console.error('上传失败:', error);
} else {
  console.log('上传成功:', data);
}

更简化的写法（直接上传Blob） #

Supabase的upload方法本身支持直接传入Blob对象，无需额外创建File，代码可以更简洁：

const imgBlob = await req.blob();
const time = new Date().getTime();

const { data, error } = await supabase.storage
  .from('ama')
  .upload(`${time}.png`, imgBlob, { 
    cacheControl: '3600', 
    upsert: false,
    contentType: 'image/png' // 显式指定MIME类型，确保存储正确识别文件
  });

额外提示 #

• 先确认fetch请求成功：可以在获取Blob前加判断if (!req.ok) throw new Error('图片下载失败')
• 若目标图片跨域，需确保源服务器配置了正确的CORS规则，否则会出现跨域错误
• 建议给上传的文件名加上后缀（比如.png），方便后续识别和使用文件

内容的提问来源于stack exchange，提问作者kaushik choudhury