使用Expo ImagePicker上传裁剪图片至S3后无法渲染的问题排查

你遇到的问题核心确实是MIME类型设置不正确或者文件编码处理不当——毕竟base64转码后能正常显示，说明图片数据本身没问题，只是上传到S3时没告诉它这是一张图片，导致默认打上了application/octet-stream的类型，客户端没法正确解析渲染。我来帮你一步步解决：

关键修复步骤 #

1. 正确获取ImagePicker的返回数据 #

注意Expo 49+版本的ImagePicker返回结构有变化，base64和mimeType会放在assets数组里，先确保拿到正确的元数据：

let pickerResult = await ImagePicker.launchImageLibraryAsync({
  allowsEditing: true,
  aspect: [1, 1],
  base64: true,
  exif: false,
});

if (!pickerResult.canceled) {
  const selectedAsset = pickerResult.assets[0];
  const imageBase64 = selectedAsset.base64;
  const imageMimeType = selectedAsset.mimeType; // 拿到正确的类型，比如image/jpeg、image/png
}

2. 将base64转为Blob（避免编码问题） #

直接上传base64字符串容易导致编码错误，转成Blob是更标准的做法，同时绑定正确的MIME类型：

// 封装base64转Blob的工具函数
const convertBase64ToBlob = async (base64, mimeType) => {
  const response = await fetch(`data:${mimeType};base64,${base64}`);
  return response.blob();
};

const imageBlob = await convertBase64ToBlob(imageBase64, imageMimeType);

3. 生成签名URL时必须指定Content-Type #

生成S3签名URL的请求里，一定要把Content-Type参数设置为刚才拿到的imageMimeType，比如用AWS SDK v3的示例：

import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
import { PutObjectCommand } from "@aws-sdk/client-s3";

const command = new PutObjectCommand({
  Bucket: "你的存储桶名称",
  Key: "自定义的图片文件名.jpg",
  ContentType: imageMimeType, // 关键！必须和上传的MIME类型一致
});

const signedUrl = await getSignedUrl(s3Client, command, { expiresIn: 3600 });

4. 上传Blob时设置请求头匹配MIME类型 #

上传到签名URL时，请求头里也要带上Content-Type，确保和签名参数匹配：

const uploadResponse = await fetch(signedUrl, {
  method: "PUT",
  body: imageBlob,
  headers: {
    "Content-Type": imageMimeType, // 再次确认类型一致性
  },
});

if (uploadResponse.ok) {
  console.log("图片上传成功，现在可以正常渲染了！");
}

验证修复结果 #

上传完成后，去S3控制台查看文件的元数据，检查Content-Type是否和你设置的一致（比如image/jpeg）。如果之前是默认的application/octet-stream，现在改成正确类型后，图片就能正常渲染了。

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