Next.js+Node.js上传AWS S3图片前端显示异常问题求助

问题1：S3图片上传成功但前端显示“禁止访问” #

核心原因及修复方案 #

1. S3 Bucket权限配置问题
   • AWS默认禁用Bucket ACL，需先在Bucket「权限」>「访问控制列表(ACL)」中开启「ACLs已启用」，并确保对象设置了public-read权限。
   • 或改用Bucket Policy配置公共访问（替换bucketName为你的桶名）：

     {
       "Version": "2012-10-17",
       "Statement": [
         {
           "Effect": "Allow",
           "Principal": "*",
           "Action": "s3:GetObject",
           "Resource": "arn:aws:s3:::bucketName/*"
         }
       ]
     }
     

2. 上传未等待S3操作完成
   原代码中client.send是异步操作但未加await，导致图片还在上传就返回链接，此时对象未就绪或权限未生效。修改api/upload/route.js的上传逻辑：

   // 原代码
   client.send(new PutObjectCommand({...}))
   // 修改为
   await client.send(new PutObjectCommand({
       Bucket: bucketName,
       Key: newFilename,
       Body: buffer,
       ACL: 'public-read',
       ContentType: file.type,
   }))
   

3. 区域端点不匹配
   确认Bucket实际区域与代码中region: 'us-east-1'一致，若区域不同，同步修改代码区域并调整链接端点格式。

问题2：首次上传的图片需二次上传后才可见 #

核心原因及修复 #

该问题与上述client.send未加await直接返回链接有关：S3上传是异步操作，未等待上传完成就返回链接，前端此时访问会因对象未就绪无法显示；二次上传时，第一次的图片已完成上传，因此能正常显示。

修复方案：在api/upload/route.js的循环上传逻辑中添加await，确保每张图片上传完成后再生成链接返回：

for (const file of files) {
    const ext = file.name.split('.').pop()
    const newFilename = Date.now() + "." + ext;

    const bytes = await file.arrayBuffer();
    const buffer = Buffer.from(bytes)

    // 添加await等待上传完成
    await client.send(new PutObjectCommand({
        Bucket: bucketName,
        Key: newFilename,
        Body: buffer,
        ACL: 'public-read',
        ContentType: file.type,
    }))
    const link = `https://${bucketName}.s3.us-east-1.amazonaws.com/${newFilename}`;
    links.push(link);
}

额外检查点 #

• 配置S3 CORS规则允许前端域名访问（生产环境建议限制具体域名）：

  [
      {
          "AllowedHeaders": ["*"],
          "AllowedMethods": ["GET", "PUT", "POST"],
          "AllowedOrigins": ["*"],
          "ExposeHeaders": []
      }
  ]
  

• 前端图片链接添加?t=${Date.now()}防止缓存的逻辑是合理的，无需修改。

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