如何修复Supabase存储桶中损坏的图片？

嘿，碰到这种图片上传后损坏、类型还莫名变了的情况确实挺闹心的！我之前也踩过类似的坑，结合你的描述——PNG变成了application/json格式、体积还变大，大概率是前端上传时没有正确传递原始的二进制文件数据，反而把文件对象转成了JSON格式上传，导致Supabase把它当成JSON文件存储了，自然图片就没法正常显示啦。

给你几个具体的修复步骤和注意点：

• 检查并修正前端上传代码
  在React/Next.js里用Supabase Storage上传时，一定要直接传递原生的File对象，别对它做多余的序列化操作。比如正确的上传代码应该是这样的：

  const { data, error } = await supabase.storage
    .from('profiles') // 你的存储桶名称
    .upload(`profile-pics/${fileName}`, file, {
      contentType: file.type, // 显式指定文件类型，确保Supabase识别正确
    });
  

  要避免的错误操作：比如不小心把File对象用JSON.stringify()转成字符串上传，或者从表单里拿到的不是真正的File对象（比如误拿了文件的路径字符串）。

• 删除错误文件并重新上传
  已经上传的损坏文件没法直接修复，得先在Supabase控制台的Storage面板里找到这些错误文件删掉，然后用上面的正确代码重新上传对应的图片。

• 验证上传后的文件元数据
  上传完成后，你可以在Supabase控制台里查看文件的Content-Type是否正确（应该是image/png这类图片格式），也可以在前端调用getMetadata接口确认：

  const { data: metadata, error } = await supabase.storage
    .from('profiles')
    .getMetadata(`profile-pics/${fileName}`);
  console.log(metadata.contentType); // 应该输出image/png
  

另外还有两个小细节要注意：

1. 如果是用HTML表单上传，一定要给表单加上enctype="multipart/form-data"属性，不然表单会把文件转成文本格式提交；
2. 要是你用Next.js的API路由做中间层处理上传，别在API路由里用express.json()或者bodyParser.json()这类解析JSON的中间件，否则会把二进制文件数据解析成JSON，导致上传错误。

按照这些步骤调整后，应该就能正常上传并显示图片啦！

内容来源于stack exchange