我正在尝试使用Fetch API将照片文件上传到S3存储桶。在尝试上传照片时，我在POST上收到400个错误请求。我正在正确获取预签名的帖子URL和文件详细信息，但我认为格式化formData的方式不正确。
我正在使用一个html文件输入，它使用onchange来运行一个javascript函数handlePhoto。
html是
<input type="file" onchange="handlePhoto()" id="file_input"/>并且javascript函数是
function handlePhoto(){
const file = document.getElementById('file_input').files[0]
let formData = new FormData()
fetch("/v1/photos/get_presigned_post/" , {
method: "GET"
})
.then(response => response.json())
.then(s3Result => {
const { url, fields } = s3Result;
Object.keys(s3Result.fields).forEach(key => {
formData.append(key, s3Result.fields[key]);
});
formData.append('acl', 'public-read');
formData.append('Content-Type', file.type);
formData.append("file", file);
fetch(url, {
method: "POST",
body: formData,
headers: {
"Content-Type": "multipart/form-data"
}
})
});
}任何帮助都将不胜感激。
4条答案
按热度按时间nkhmeac61#
假设你有一个预先签名的网址，你可以使用这样的东西：
6mzjoqzu2#
检查s3Result中的URL，对我来说，这是错误的链接，它不包括我的bucketname. URL必须是这样的工作：
vuktfyat3#
您的URL可能不正确，根据文档，主机名应类似于.“s3.Region.amazonaws.com“。
这两个链接可能有助于https://docs.aws.amazon.com/AmazonS3/latest/userguide/RESTAPI.html和，https://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-HTTPPOSTForms.html
ktecyv1j4#
您不需要使用FormData，只需传递内容类型为“octet-stream”的文件即可。
生成预签名URL时必须使用acl。