Flutter/Dart如何将上传到S3桶的图片自动设为image/jpeg类型

使用S3 POST表单模式接收上传请求时，若未显式声明文件的媒体类型，S3会默认将对象元数据设置为application/octet-stream。浏览器识别到该类型时，会触发文件下载逻辑而非页面预览。
你当前的代码存在三个核心缺失：

• 构造MultipartFile时未传入对应的文件媒体类型参数
• 提交的POST表单未携带S3可识别的Content-Type元数据字段
• 用于签名的预上传Policy未将Content-Type纳入允许传入的字段范围，即使前端补传字段也会被S3拦截
  以上问题共同导致了对象被存储为默认二进制流类型。

• 第一步：为MultipartFile补充媒体类型参数
  原有代码初始化MultipartFile时没有传入contentType参数，需要手动指定对应媒体类型。固定上传JPG图片可直接设置为image/jpeg，如果需要兼容多图片格式，可根据文件后缀动态匹配image/png、image/webp等对应类型。
  修改后的代码参考：

  final multipartFile = http.MultipartFile(
    'file', 
    stream, 
    length,
    filename: path.basename(file.path),
    // 新增该行指定文件媒体类型
    contentType: MediaType('image', 'jpeg'),
  );
  

  注意：需要额外导入package:http_parser/http_parser.dart才能正常使用MediaType类。

• 第二步：在POST表单字段中补充Content-Type元数据
  S3的POST上传逻辑会直接读取表单内Content-Type字段的值，作为对应上传对象的元数据存储。需要在原有字段列表中新增一行赋值：

  req.fields['Content-Type'] = 'image/jpeg';
  

• 第三步：调整预签名Policy的白名单规则
  S3会严格校验POST表单提交的所有字段是否在预定义的Policy允许范围内，如果Policy没有声明允许接收Content-Type字段，前端即使传了对应值，也会直接返回403签名校验失败。需要在构造Policy时，将Content-Type的匹配规则加入策略白名单，确保image/jpeg值在允许传入范围内。

• 小细节修正
  原代码中endpoint字符串末尾多了一个空格，建议删除，避免Uri.parse解析时出现路径拼接异常。

修改完成后重新上传测试文件，在S3控制台对应对象的元数据面板中，确认Content-Type已显示为image/jpeg。此时访问对象的公网链接，浏览器会直接渲染预览图片，不再触发自动下载。

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