React使用react-aws-s3上传至AWS S3时进度追踪失效问题

问题诊断 #

你遇到的核心问题是react-aws-s3库的uploadFile方法并没有原生支持onProgress回调参数，你传递的配置对象里的onProgress不会被库内部调用，所以进度相关的日志和状态更新都不会触发。这个库是AWS SDK的轻量封装，但API设计里并未暴露上传进度的监听能力，导致你传入的回调根本不会执行。

解决方案 #

放弃react-aws-s3，直接使用AWS SDK for JavaScript v3实现带进度监听的S3上传，这是官方支持、功能更可靠的方案。

步骤1：安装依赖 #

npm install @aws-sdk/client-s3 @aws-sdk/lib-storage

步骤2：替换原上传钩子逻辑 #

import { S3Client } from "@aws-sdk/client-s3";
import { Upload } from "@aws-sdk/lib-storage";
import { awsconfig } from './config/aws';

// 初始化S3客户端
const s3Client = new S3Client({
  credentials: {
    accessKeyId: awsconfig.accessKeyId,
    secretAccessKey: awsconfig.secretAccessKey
  },
  region: awsconfig.region
});

export const awsUpload = async ({ file, fileName, dirName, onProgress }) => {
  try {
    const uploadParams = {
      Bucket: awsconfig.bucketName,
      Key: `${dirName}${fileName}`,
      Body: file,
      ContentType: file.type
    };

    const upload = new Upload({
      client: s3Client,
      params: uploadParams,
      // 可选配置：分块大小默认5MB，并发上传数默认4
      partSize: 5 * 1024 * 1024,
      queueSize: 4
    });

    // 监听上传进度事件
    upload.on("httpUploadProgress", (progress) => {
      if (onProgress) {
        onProgress(progress.loaded, progress.total);
      }
    });

    // 执行上传并返回结果
    const result = await upload.done();
    return result;
  } catch (e) {
    throw new Error('上传文件时发生错误');
  }
};

步骤3：原上传组件无需修改 #

你的BasicUploader组件代码可以完全保留，因为新的awsUpload函数保持了相同的签名和onProgress回调参数，组件的状态更新、进度条渲染逻辑不受影响。

方案说明 #

@aws-sdk/lib-storage中的Upload类是AWS官方提供的分块上传工具，原生支持httpUploadProgress事件监听，能精准获取上传进度。相比第三方封装库，官方SDK功能完整、维护及时，可避免类似API缺失的问题。

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