gpt4 book ai didi

node.js - 如何使用 node、createPresignedPost 和 fetch 将图像文件直接从客户端上传到 AWS S3

转载 作者:行者123 更新时间:2023-12-04 17:37:03 24 4
gpt4 key购买 nike

我正在使用 s3.createPresignedPost() 在我的服务器上生成一个 AWS S3 预签名帖子对象.然后,我尝试使用 fetch 使用预签名的 post url & 字段将文件直接从客户端上传到 S3 存储桶,但我收到了 403 Forbidden .

我尝试将表单字段手动添加到我的 FormData 对象以直接匹配此示例:https://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-post-example.html但继续收到 403 错误。

用于生成 post 对象的服务器端函数

const AWS = require("aws-sdk/global");
const S3 = require("aws-sdk/clients/s3");
const uuidv4 = require("uuid/v4");

AWS.config.update({
accessKeyId: process.env.S3_KEY_ID,
secret 访问 key :process.env.S3_SECRET_KEY,
地区:“us-east-1”
});

const s3 = 新的 S3();

const getPresignedPostData = (bucket, directory) => {
const key = `${directory}/${uuidv4()}`;
const postData = s3.createPresignedPost({
桶:桶,
字段:{ Key: key, success_action_status: "201"},
条件:[{ acl: "public-read"}],
内容类型:“图像/*”,
过期时间:300
});
返回 postData;
};

返回如下所示的内容:

{
字段:{
key :“5cd880a7f8b0480b11b9940c/86d5552b-b713-4023-9363-a9b36130a03f”
政策:{Base64 编码的政策字符串}
X-Amz-算法:“AWS-HMAC-SHA256”
X-Amz-Credential:“AKIAI4ELUSI2XMHFKZOQ/20190524/us-east-1/s3/aws4_request”
X-Amz-日期:“20190524T200217Z”
X-Amz-签名:“2931634e9afd76d0a50908538798b9c103e6adf067ba4e60b5b54f90cda49ce3”
桶:“完美的照片”
success_action_status:“201”
},
网址:“https://s3.amazonaws.com/picture-perfect-photos”
}

我的客户端功能如下所示:

const uploadToS3 = 异步({ 字段,url },文件)=> {
const formData = new FormData();
Object.keys(fields).forEach(key => formData.append(key, fields[key]));
formData.append("文件", 文件);

尝试 {
常量配置 = {
方法:“POST”,
正文:表单数据
};
const response = await fetch(url, config);

如果(!响应。确定){
抛出新错误(response.statusText);
}

const 数据 = 等待 response.json();
返回数据;
} 捕获(错误){
控制台日志(错误消息);
}
};

我的 S3 存储桶 CORS 配置如下:




*
GET
POST
PUT
删除
*



我希望能得到 success_action_status: "201" 时发送的 XML 文档已设置,但我不断收到 403 Forbidden

最佳答案

我刚刚经历了同样的问题。

添加 <AllowedMethod>PUT</AllowedMethod><AllowedHeader>Content-*</AllowedHeader>到 S3 控制台中 S3 存储桶的 CORS 规则。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedHeader>Content-*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

向您的服务器发出发布请求以获取预签名的 S3 URL。发布请求应在正文中包含文件名和 MIME 类型:

快速路线:
app.post("/s3-signed-url",async (req, res, next)=>{
const s3 = new AWS.S3();
const url = await s3.getSignedUrlPromise('putObject', {
Bucket: "BUCKET_NAME",
Key: req.body.name,
ContentType: req.body.type,
Expires: 60,
ACL: 'public-read',
});
res.json({signedUrl: url})
});

选择要上传的文件时异步函数中的客户端代码:
async function onFileDrop(file){
const {name, type} = file; // I use react-dropzone to obtain the file.
const options = {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({name,type})
}
const rawResponse = await fetch("/s3-signed-url", options)
const {signedUrl} = await rawResponse.json();

// After you obtain the signedUrl, you upload the file directly as the body.
const uploadOptions = { method: 'Put', body: file,}
const res = await fetch(signedUrl, uploadOptions);
if(res.ok) {
return res.json()
}
}

我的 fatal error 是我在 uploadOptions 中添加了冗余标题上传带有签名 URL 的文件时。我遇到了其他线程,声称我必须明确添加“Content-Type” header :
`const wrongUploadOptions = { method: 'Put', body: file, headers:{"Content-Type": file.type, "x-amz-acl": public-read}}`

但这在我的情况下完全没有必要,这就是我收到 403 错误的原因。

关于node.js - 如何使用 node、createPresignedPost 和 fetch 将图像文件直接从客户端上传到 AWS S3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56299085/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com