dropzone.js使用内容类型直接上传到S3 [英] dropzone.js direct upload to S3 with content-type
问题描述
我目前正在使用dropzone.js通过预签名的URL将图像上传到S3.一切正常,除了我无法设置要上传文件的内容类型.默认情况下,它们都是使用 binary/octet-stream
上传的,我无法在浏览器中直接查看它们.
I'm currently using dropzone.js to upload images to S3 with a presigned URL. Everything works except I am unable to set the content-type of the file being uploaded. By default they are all being uploaded with binary/octet-stream
and I am unable to view them directly in the browser.
我的S3预签名策略如下:
My S3 presigned policy looks like this:
const policy = s3PolicyV4.generate({
key: key,
bucket: process.env.S3_BUCKET,
contentType: 'multipart/form-data',
region: process.env.REGION,
accessKey: process.env.ACCESS_KEY_ID,
secretKey: process.env.SECRET_ACCESS_KEY,
});
我尝试在这里更改 contentType
键没有任何运气,并且在进行了一些研究之后,我还尝试添加此键.
I've tried changing the contentType
key here with no luck and I've also tried to add this after doing some research.
conditions: [
["starts-with", "$Content-Type", ""]
]
这是前端代码,在其中我将预签名URL的值添加到dropzone.js选项中.
This is the front end code where I add the values of the presigned URL to the dropzone.js options.
$.ajax({
type: "POST",
contentType: "application/json",
dataType: "json",
url: api_endpoint,
cache: false,
success: function(data) {
s3_filename_key = data.key;
$this.options.params = {
key: data.key,
acl: data.acl,
success_action_status: data.success_action_status,
"X-Amz-Credential": data['X-Amz-Credential'],
"X-Amz-Algorithm": data['X-Amz-Algorithm'],
"X-Amz-Date": data['X-Amz-Date'],
"Policy": data.Policy,
"X-Amz-Signature": data['X-Amz-Signature']
}
done();
},
error: function(data) {}
});
当我将 Content-Type
添加到dropzone选项时,我得到此结果-根据政策无效:额外的输入字段:content-type
When I add Content-Type
to the dropzone options I get this result back - Invalid according to Policy: Extra input fields: content-type
这是我的存储桶的CORS配置.
Here is my CORS config for the bucket.
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>HEAD</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>GET</AllowedMethod>
<ExposeHeader>ETag</ExposeHeader>
<ExposeHeader>Content-length</ExposeHeader>
<AllowedHeader>*</AllowedHeader>
<AllowedHeader>Content-*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
推荐答案
尝试添加正确的contentType,而是定义了enctype.例如:
Try adding correct contentType, you defined enctype instead. E.g.:
const policy = s3PolicyV4.generate({
key: key,
bucket: process.env.S3_BUCKET,
contentType: 'application/json',
region: process.env.REGION,
accessKey: process.env.ACCESS_KEY_ID,
secretKey: process.env.SECRET_ACCESS_KEY,
});
Multypart/form-data是表单的enctype属性.
Multypart/form-data is enctype attribute of form.
这篇关于dropzone.js使用内容类型直接上传到S3的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!