Angular15升级后AWS S3上传报错：Buffer未找到及流读取异常

方案一：保留AWS SDK v2继续使用 #

Angular 15配套的TypeScript版本不再默认暴露Node.js内置全局对象（如Buffer），按以下步骤修复：

• 安装Node.js类型依赖

npm install @types/node --save-dev

• 修改tsconfig.json的compilerOptions，添加Node类型支持：

{
  "compilerOptions": {
    // 原有配置保留
    "types": ["node"],
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

• 代码中显式导入Buffer，替代全局使用：

import { Buffer } from 'buffer';

• 若打包时仍提示Buffer未定义，在src/polyfills.ts中添加全局polyfill：

(window as any).Buffer = require('buffer').Buffer;

方案二：修复AWS SDK v3的上传错误 #

readableStream.getReader is not a function错误源于传递的流不符合SDK v3要求，按以下调整：

• 确保使用模块化导入的SDK v3包：

npm install @aws-sdk/client-s3 --save

• 上传时使用File对象的标准可读流，而非直接传递File：

import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';

async uploadToS3(file: File) {
  const s3Client = new S3Client({
    region: '你的区域',
    credentials: {
      accessKeyId: '你的密钥ID',
      secretAccessKey: '你的密钥'
    }
  });

  const uploadCommand = new PutObjectCommand({
    Bucket: '你的存储桶名',
    Key: file.name,
    Body: file.stream(), // 这里获取标准ReadableStream
    ContentType: file.type
  });

  try {
    await s3Client.send(uploadCommand);
    console.log('上传完成');
  } catch (err) {
    console.error('上传失败', err);
  }
}

• 若目标浏览器不支持Blob.stream()，改用FileReader转换为ArrayBuffer：

const getFileBuffer = (file: File): Promise<ArrayBuffer> => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result as ArrayBuffer);
    reader.onerror = reject;
    reader.readAsArrayBuffer(file);
  });
};

// 调用时替换Body：
const body = await getFileBuffer(file);
const uploadCommand = new PutObjectCommand({
  // 其他参数...
  Body: body
});

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