如何通过签名URL与JavaScript将二进制字符串格式文件上传至Amazon S3并解决文件无法打开问题

我来帮你解决这个头疼的问题——你现在的核心问题是上传给S3的数据格式不对，导致存储的文件是“无效”的，自然打不开。先拆解问题，再给你一步步的解决方案：

一、先搞懂S3签名URL的上传要求 #

S3签名URL（不管是PUT还是POST类型），如果是直接上传文件内容，必须发送文件的原始二进制数据，不能是Base64编码后的字符串，也不需要用FormData包装（除非你的签名是针对表单上传生成的带policy的那种，但你的场景显然不需要）。

你之前的代码把二进制字符串转成Base64再塞进FormData，相当于让S3存了一堆文本编码后的内容，而不是原始的文件字节流，下载后当然打不开。

二、修正离线存储的文件处理逻辑 #

首先，把你用readAsBinaryString的方式换掉——这个API其实已经被标记为过时了，而且二进制字符串在处理某些特殊字节时容易出问题。改用readAsArrayBuffer来存储更可靠的二进制数据：

let fileData = e.target.files[0];
let reader = new FileReader();
reader.readAsArrayBuffer(fileData); // 读取为ArrayBuffer（原生二进制格式）
reader.onload = function(e) {
  let arrayBuffer = e.target.result;
  let data = {
    originalFilename: fileData.name,
    filename: fileData.name,
    mimeType: fileData.type,
    fileSizeBytes: fileData.size,
    lastModified: fileData.lastModified,
    buffer: arrayBuffer // 直接存ArrayBuffer，IndexedDB支持存储这种类型
  };
  // 把data存入IndexedDB
}

如果你的旧数据已经是二进制字符串了，也没关系，后面上传时可以转回来，不过优先用ArrayBuffer存储更稳妥。

三、修正签名URL的上传代码 #

情况1：存储的是ArrayBuffer（推荐） #

直接把ArrayBuffer作为请求体发送给S3，不需要任何额外包装：

// signedUrl 为你的签名URL
// data 是从IndexedDB取出的文件数据
let contentType = data.mimeType;
let arrayBuffer = data.buffer;

return $.ajax({
  url: signedUrl,
  method: "PUT", // 注意：签名URL的HTTP方法要和生成时一致，通常PUT更适合直接传文件
  contentType: contentType, // 必须和签名时指定的Content-Type匹配，否则会403
  data: arrayBuffer, // 直接传原生二进制数据
  processData: false, // 禁止jQuery处理数据，保持二进制原样
})
.then(function (response) {
  console.log("文件上传成功！", response);
})
.catch(function (e) {
  console.error('S3上传出错:', e);
  throw new Error('Upload failed');
});

情况2：兼容旧的二进制字符串数据 #

如果之前已经存了二进制字符串，先把它转回Uint8Array（二进制数组）再上传：

// 工具函数：二进制字符串转Uint8Array
function binaryStrToUint8Array(binaryStr) {
  const uint8Arr = new Uint8Array(binaryStr.length);
  for (let i = 0; i < binaryStr.length; i++) {
    uint8Arr[i] = binaryStr.charCodeAt(i);
  }
  return uint8Arr;
}

// 上传代码
let contentType = data.mimeType;
let binaryString = data.bin;
let uint8Array = binaryStrToUint8Array(binaryString);

return $.ajax({
  url: signedUrl,
  method: "PUT",
  contentType: contentType,
  data: uint8Array, // 直接传二进制数组
  processData: false,
})
.then(function (response) {
  console.log("文件上传成功！", response);
})
.catch(function (e) {
  console.error('S3上传出错:', e);
  throw new Error('Upload failed');
});

四、关键注意点 #

1. HTTP方法要匹配：生成签名URL时用的是PUT，上传就必须用PUT；如果是POST，要确认签名是否包含表单policy（这种情况需要按表单字段提交，但你的场景用PUT更简单）。
2. Content-Type要一致：签名时如果指定了Content-Type，上传时必须传相同的值，否则S3会返回403权限错误。
3. 不要额外编码：绝对不要用btoa转Base64，也不要用FormData包装——S3要的是原始文件的字节流，不是经过处理的文本或表单数据。

这样修改后，你上传到S3的就是和用户选择的原始文件完全一致的二进制数据，下载后自然就能正常打开了。

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