dropzone.js使用content-type直接上传到S3

Question

我目前正在使用dropzone.js将图像上传到带有预签名URL的S3.一切正常,但我无法设置正在上传的文件的内容类型.默认情况下,它们都被上传,binary/octet-stream我无法直接在浏览器中查看它们.

我的S3预先签署的政策如下:

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在没有运气的情况下更换钥匙,我也尝试在进行一些研究后添加它.

conditions: [
   ["starts-with", "$Content-Type", ""]
]

这是前端代码,我将预签名URL的值添加到dropzone.js选项中.

$.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-Typedropzone选项时,我得到了这个结果 -Invalid according to Policy: Extra input fields: content-type

这是我的桶的CORS配置.

<?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>

Answer 1

尝试添加正确的 contentType，而是您定义的 enctype。例如：

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 属性。