React Native+TypeScript+S3项目：图片视频上传预览方案咨询

你的核心问题是base64格式上传时未正确设置文件类型标识，导致S3无法识别文件格式，进而无法预览。直接上传二进制文件并配置正确的HTTP头，就能解决这个问题，且无需依赖Node.js模块。

步骤1：获取文件的MIME类型 #

首先通过expo-file-system获取文件的真实MIME类型，这是让S3正确识别文件的关键：

import * as FileSystem from 'expo-file-system';

// 获取文件信息，包含MIME类型
const getFileMimeType = async (uri: string): Promise<string> => {
  const fileInfo = await FileSystem.getInfoAsync(uri, { md5: false });
  // 如果getInfoAsync返回的mimeType为空，可通过文件后缀手动判断（兜底方案）
  if (fileInfo.mimeType) return fileInfo.mimeType;
  
  const ext = uri.split('.').pop()?.toLowerCase();
  const mimeMap: Record<string, string> = {
    jpg: 'image/jpeg',
    jpeg: 'image/jpeg',
    png: 'image/png',
    mp4: 'video/mp4',
    mov: 'video/quicktime'
  };
  return mimeMap[ext || ''] || 'application/octet-stream';
};

步骤2：通过预签名URL上传二进制文件 #

使用FileSystem.uploadAsync直接上传本地文件（无需转base64），同时设置正确的Content-Type请求头：

// 假设你已经通过后端获取到S3预签名PUT URL
const uploadToS3 = async (fileUri: string, presignedUrl: string) => {
  const mimeType = await getFileMimeType(fileUri);
  
  const uploadResult = await FileSystem.uploadAsync(
    presignedUrl,
    fileUri,
    {
      httpMethod: 'PUT',
      headers: {
        'Content-Type': mimeType,
        // 如果需要公开访问，可添加（需后端生成预签名URL时允许该头）
        // 'x-amz-acl': 'public-read'
      },
      uploadType: FileSystem.UploadType.BINARY // 关键：以二进制格式上传
    }
  );

  if (uploadResult.status === 200) {
    console.log('上传成功');
    // 上传完成后，S3的原始URL（或预签名URL）即可直接预览
    return { success: true, url: presignedUrl.split('?')[0] }; // 截取不带签名的基础URL（如果桶允许公开访问）
  } else {
    throw new Error(`上传失败，状态码：${uploadResult.status}`);
  }
};

// 调用示例
const photoUrl = await uploadToS3(photo, photoPresignedUrl);
const bannerUrl = await uploadToS3(banner, bannerPresignedUrl);

关键注意事项 #

• 预签名URL配置：后端生成预签名URL时，必须指定PUT方法，并且允许对应的Content-Type（或者设置为*允许任意类型）。如果添加了x-amz-acl头，预签名生成时也要包含该参数。
• 文件权限：如果需要通过S3 URL直接公开预览，需确保文件的ACL为public-read，或者配置桶的访问策略允许公开读取。
• 视频上传优化：大视频文件可考虑分块上传，但expo-file-system的uploadAsync已支持断点续传，一般场景下直接使用即可。

为什么之前的base64方案不行？ #

当你上传base64字符串时，如果没有将其转换为二进制并设置正确的Content-Type，S3会默认将文件存储为text/plain类型。此时即使你拿到URL，浏览器/设备也会把它当成文本解析，而非图片/视频，自然无法预览。

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