[英]File on AWS S3 having extra information in file after uploading using presigned URL
I am trying to upload file directly to S3 bucket using presigned url.我正在尝试使用预先签名的 url 将文件直接上传到 S3 存储桶。
Below is the server end code written in node.js, and it creates signed url successfully.下面是用node.js编写的服务器端代码,它成功创建了签名url。
const s3 = new AWS.S3({
accessKeyId: config.accessKeyId,
secretAccessKey: config.secretAccessKey,
region: config.awsConfig.region
});
const signedUrlExpireSeconds = 60 * 60;
let mimeType = "video/mp4";
const filename =Date.now();
const Key = `${filename}.mp4`;
const params = {
Bucket: config.awsConfig.aws_upload_bucket,
Key: Key,
Expires: signedUrlExpireSeconds,
ACL: 'public-read',
ContentType: mimeType
};
s3.getSignedUrl('putObject', params, function (err, url) {
if (err) {
console.log('Error getting presigned url from AWS S3');
res.json({ success: false, message: 'Pre-Signed URL error', urls: fileurls });
}
else {
console.log('Presigned URL: ', url);
res.json({ success: true, message: 'AWS SDK S3 Pre-signed urls generated successfully.', url: url, Key:Key, ContentType: mimeType });
}
});
Below is the code written at React end.下面是在 React 端编写的代码。
const DropzoneArea = props => {
const [files, setFiles] = useState([]);
let awsFile = '';
const onUploadHandler = files => {
if (files.length === 0) {
console.log('Debug : [components DropzoneArea onUploadHandler] files => ', files);
return;
}
awsFile = files[0]
// calling the API to get presigned url.
getPreSignedURL(files[0].type,S3preSignedURLCallback)
};
const S3preSignedURLCallback = videoData => {
const xhr = new XMLHttpRequest();
xhr.open('PUT', videoData.url);
xhr.setRequestHeader('Content-Type', videoData.ContentType);
var res = new FormData();
res.append('file', awsFile);
xhr.send(res);
};
}
using above code the File upload to s3 successfully but the video couldn't play.使用上面的代码文件成功上传到 s3 但视频无法播放。 So I compared files on S3 with the actual file the I uploaded.
所以我将 S3 上的文件与我上传的实际文件进行了比较。 I found that few extra request data also written in S3 file.
我发现在 S3 文件中也写入了一些额外的请求数据。
A minor mistake I am doing here, can't locate the bug.我在这里做的一个小错误,无法定位错误。 Please help.
请帮忙。
Don't use formData
, just send the file directly.不要使用
formData
,直接发送文件即可。
const S3preSignedURLCallback = videoData => {
const xhr = new XMLHttpRequest();
xhr.open('PUT', videoData.url);
xhr.setRequestHeader('Content-Type', videoData.ContentType);
// Send the binary data.
// Since a File is a Blob, you can send it directly.
xmlHttpRequest.send(awsFile);
};
The difference you see, is because AWS is saving the raw request, without parsing it, and you can see that the right image is a multipart/form-data request.您看到的不同之处在于 AWS 正在保存原始请求,而不对其进行解析,您可以看到正确的图像是多部分/表单数据请求。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.