无需FormData上传文件：基于XMLHttpRequest直传大文件至Amazon S3

其实你已经找对核心方案啦！直接用XMLHttpRequest（XHR）发送PUT请求到Amazon S3，完全不需要借助FormData——这也是S3直传的经典方案之一，尤其适合大文件上传，能精准控制进度、中断等操作。

为什么不需要FormData？ #

Amazon S3的PUT接口本身就支持直接接收文件二进制内容作为请求体，只要请求头的Content-Type与文件类型匹配，并且请求URL（通常是预签名URL）拥有合法的PUT权限，就能完成上传，完全不需要把文件打包成FormData格式（那是给需要多字段提交的表单场景用的）。

完善你的XHR上传代码 #

我把你给出的代码补全并优化了，加入了Promise封装（方便async/await调用）、完整的错误处理和进度计算逻辑：

export const fileUploader = async (url, file) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();

    // 上传完成回调：区分成功/失败状态
    xhr.upload.addEventListener('load', () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve({ 
          status: xhr.status, 
          response: xhr.responseText 
        });
      } else {
        reject(new Error(`上传失败，状态码：${xhr.status}`));
      }
    });

    // 上传错误捕获
    xhr.upload.addEventListener('error', (event) => {
      reject(new Error(`上传出错：${event.type}`));
    });

    // 上传中断回调
    xhr.upload.addEventListener('abort', () => {
      reject(new Error('上传已中断'));
    });

    // 实时上传进度计算
    xhr.upload.addEventListener('progress', (event) => {
      if (event.lengthComputable) {
        const progressPercent = (event.loaded / event.total) * 100;
        console.log(`上传进度：${progressPercent.toFixed(2)}%`);
        // 这里可以把进度传递给UI层，比如通过回调或者状态管理工具
      }
    });

    // 捕获XHR本身的请求错误（比如网络断开）
    xhr.addEventListener('error', () => {
      reject(new Error('请求发送失败，请检查网络'));
    });

    xhr.open('PUT', url);
    // 务必设置正确的Content-Type，否则S3会默认识别为binary/octet-stream
    xhr.setRequestHeader('Content-Type', file.type || 'application/octet-stream');
    // 直接将File对象作为请求体发送
    xhr.send(file);
  });
};

额外补充：用Fetch API也能实现 #

如果你更倾向于现代的Fetch API，同样可以不用FormData，直接把File对象作为请求体：

export const fileUploaderFetch = async (url, file, abortController) => {
  try {
    const response = await fetch(url, {
      method: 'PUT',
      headers: {
        'Content-Type': file.type || 'application/octet-stream',
      },
      body: file,
      // 支持中断请求，需要外部传入AbortController实例
      signal: abortController?.signal,
    });

    if (!response.ok) {
      throw new Error(`上传失败，状态码：${response.status}`);
    }

    return await response.json();
  } catch (error) {
    if (error.name === 'AbortError') {
      throw new Error('上传已中断');
    }
    throw error;
  }
};

关键注意事项 #

• 确保你的S3请求URL（预签名URL）是有效的，并且包含PUT权限，否则会返回403/404错误
• Content-Type一定要设置准确，否则后续访问文件时可能出现预览异常
• 超大文件（比如超过100MB）可以考虑S3的分块上传，但单文件直传方案完全满足大多数场景需求
• 监听进度时，event.lengthComputable可能会在某些场景下为false（比如无法获取文件总大小），需要做好兼容处理

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