S3 put object upload file，被AI欺骗的一天 - 浙林龙哥

const s3Client = new S3Client({
region: "us-east-1", // region
credentials: {
accessKeyId: "xxxx", // Access Key ID
secretAccessKey: "xxxx", // Secret Access Key
}
});

const putObjectCommand = new PutObjectCommand({
Bucket: "test",
Key: "20250211165425.png"
});

async function gen() {
const url = await getSignedUrl(s3Client, putObjectCommand, { expiresIn: 3600 });
console.log(url);
}

gen();

3. cmd中输入：node genurl.js，得到一个pre put url

4. 写一个upload.html

<html><body>
<input type="file" id="fileInput" />
<button id="uploadButton">Upload</button>
<script>
document.getElementById('uploadButton').addEventListener('click', async function() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];
  console.log(file.type);
 
  if (!file) {
    alert('Please select a file!');return;
  }
  const preSignedUrl = 'https://test.s3.us-east-1.amazonaws.com/*****&x-id=PutObject';
  try {
    const response = await fetch(preSignedUrl, {
      method: 'PUT',
      body: file
    });
    if (response.ok) {
      alert('successfully!');
    } else {
      alert('failed!');
    }
  } catch (error) {
    console.error('Error:', error);
  }
});
</script>
</body></html>

选一个文件上传就ok了

其他注意事项：
1）s3 上看到的bucket arn长这样
arn:aws:s3:::test
取最后一个test就行了，这里花了好长时间，被AI骗了

2）AI会给你v2的解决方案，别信它的，现在需要npm aws-sdk v3，也就是带@的

3）配置S3的CORS策略通常涉及在S3桶的配置中添加一个CORS规则，该规则指定了哪些源（origins）被允许访问桶中的资源，以及允许哪些HTTP方法和头部（headers）

配置S3 CORS的详细步骤：

‌登录AWS管理控制台‌：
首先，登录到你的AWS管理控制台‌
‌选择S3服务并进入存储桶详情页面‌：
在控制台中，找到S3服务，选择你想要配置CORS的存储桶，并点击进入该存储桶的详情页面‌
‌导航到“权限”选项卡并找到CORS配置‌：
在存储桶详情页面中，点击“权限”选项卡，然后找到“跨域资源共享（CORS）”配置部分‌
‌编辑CORS配置‌：
点击“编辑”按钮以开始配置CORS规则。你可以添加新的规则或修改现有的规则‌
‌设置CORS规则‌：
CORS规则定义了允许的来源（Origin）、HTTP方法（Method）和自定义头部（Header）等。注意这里需要用json！
‌保存配置‌：
完成规则设置后，保存CORS配置。这样，你的S3存储桶就会根据这些规则来处理跨域请求了‌

附json：

[
    {
        "AllowedHeaders": [
            "Authorization",
            "Content-Type",
            "X-Amz-Date",
            "X-Amz-Security-Token"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "http://localhost",
            "https://localhost",
            "http://127.0.0.1",
            "https://127.0.0.1"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2"
        ],
        "MaxAgeSeconds": 3600
    }
]

AI又骗我用xml

xxxx这个不能用！
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
</CORSRule>
</CORSConfiguration>

xxxx这个不能用！

4）AI在写产生pre put url的代码时，用了GetObjectCommand，又害我想了好久
const { S3Client, GetObjectCommand} = require("@aws-sdk/client-s3");
正确的应该是这样：
const { S3Client, PutObjectCommand } = require("@aws-sdk/client-s3");