Django前端用JavaScript AWS SDK传文件至S3失败，求API参数指导

一、先修正代码中的核心问题 #

你的代码存在几个关键问题，导致上传失败：重复初始化S3实例、未处理Cognito凭证的异步获取、错误回调写法错误，下面是分步修正和参数说明：

1. 全局AWS配置与凭证初始化（异步处理是关键）

Cognito身份凭证的获取是异步操作，必须等凭证加载完成后再创建S3实例，否则会因未授权被拒绝：

AWS.config.update({
    region: 'us-east-1'
});

// 初始化Cognito身份凭证
const credentials = new AWS.CognitoIdentityCredentials({
    IdentityPoolId: 'MY-IDENTITY-POOL-ID'
});

// 异步获取凭证，完成后再创建全局S3实例
credentials.get(function(err) {
    if (err) {
        console.error('凭证获取失败:', err);
        return;
    }
    // 挂载到window全局，后续上传直接复用
    window.s3 = new AWS.S3({
        apiVersion: '2006-03-01',
        params: {Bucket: 'MYBUCKETNAME'} // 默认桶，后续上传可省略重复指定
    });
});

2. 修正后的上传函数

去掉重复的S3实例创建，修复错误回调，补充关键参数：

function s3upload() { 
    const files = document.getElementById('fileUpload').files;
    if (!files || files.length === 0) {
        alert('请选择要上传的文件');
        return;
    }

    const file = files[0];
    const fileName = file.name;
    const fileUrl = `https://MYBUCKETNAME.s3.us-east-1.amazonaws.com/${fileName}`;
    alert(fileUrl);

    // 复用全局已初始化的S3实例
    window.s3.upload({
        Key: fileName, // S3存储的文件键，要存子目录可写`uploads/${fileName}`
        Body: file, // 从input获取的File对象，必须是原生文件对象
        ACL: 'public-read', // 访问权限，可选private/authenticated-read等
        ContentType: file.type // 显式设置MIME类型，避免S3默认标记为二进制流
    }, function(err, data) {
        if (err) {
            console.error('上传失败详情:', err);
            alert(`上传失败: ${err.message}`);
            return;
        }
        alert('上传成功！');
        console.log('文件访问URL:', data.Location);
        // 可在此处将data.Location传给Django后端存储
    });
};

二、关键API参数详解 #

• Key：S3中存储对象的唯一标识，相当于文件路径+文件名，直接写文件名会存在桶根目录，加前缀（如user-uploads/xxx.jpg）可实现分类存储。
• Body：必须是原生File对象（从<input type="file">的files数组中获取），不能是Blob或其他类型（除非特殊场景）。
• ACL：控制文件的访问权限，public-read允许所有人访问，private仅授权用户可访问，需结合桶的CORS策略和Cognito角色权限设置。
• ContentType：建议显式设置，否则S3会默认将所有文件标记为binary/octet-stream，导致浏览器无法直接预览图片、PDF等文件，只能下载。

三、必须检查的前置配置 #

1. Cognito角色权限：确保身份池的未认证/认证角色有S3上传权限，示例策略：

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": ["s3:PutObject", "s3:PutObjectAcl"],
            "Resource": "arn:aws:s3:::MYBUCKETNAME/*"
        }
    ]
}

2. S3桶CORS配置：必须允许你的前端域名发起跨域请求，示例配置：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>https://your-django-app-domain.com</AllowedOrigin>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
        <ExposeHeader>ETag</ExposeHeader>
    </CORSRule>
</CORSConfiguration>

3. AWS SDK引入：确保页面已正确引入AWS SDK，比如：

<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1000.0.min.js"></script>

内容的提问来源于stack exchange，提问作者Marcus