使用HTML表单上传至S3桶时遭遇Unicode编码格式错误求助

针对你遇到的浏览器表单上传报错但Postman正常的问题，核心原因是前端处理预签名URL参数时的编码或字段配置错误，以下是具体排查和解决步骤：

• 检查表单enctype配置
  确保表单的enctype属性严格设置为multipart/form-data，不要额外指定charset（比如multipart/form-data; charset=utf-8），让浏览器自动处理编码，避免和S3的要求冲突。

• 正确解析预签名URL参数
  不要手动拆分URL字符串获取参数，直接使用浏览器原生的URLSearchParams安全解析：

  const presignedUrl = new URL(你的预签名URL);
  const params = presignedUrl.searchParams;
  // 直接赋值给表单字段
  document.querySelector('input[name="X-Amz-Algorithm"]').value = params.get('X-Amz-Algorithm');
  document.querySelector('input[name="X-Amz-Credential"]').value = params.get('X-Amz-Credential');
  // 其他X-Amz-*字段同理
  

  避免使用decodeURIComponent对参数做额外解码——预签名URL里的参数已经是正确编码后的格式，二次解码会破坏特殊字符（比如Security Token里的+、/）。

• 验证表单字段名的准确性
  所有X-Amz系列的表单字段name必须和预签名参数名完全一致，包括大小写（比如X-Amz-Security-Token不能写成x-amz-security-token），S3对字段名的大小写是敏感的，拼写错误会触发参数解析异常。

• 排查特殊字符的处理
  重点检查X-Amz-Credential、X-Amz-Security-Token这类可能包含特殊字符的参数：

  • 确认JavaScript赋值时没有自动转义字符（比如把+变成空格），如果出现这种情况，可以用params.get()直接获取原始值，不要做任何字符串替换。
  • 不要在表单字段的value里手动添加引号或其他修饰符，直接赋值原始参数值即可。

如果以上步骤都排查过还是有问题，可以在提交前打印所有表单字段的value，和Postman里使用的参数做逐字符对比，找出编码不一致的字段，通常就能定位到问题所在。

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