​
为何不建议直接用 Javascript SDK 等客户端 SDK 来上传文件？

  1. 容易被反编译后暴露 ak / sk
  2. 不够灵活
安全建议：永远不要使用 API 下发 ak / sk

​
更好的方案

​
后端生成「预签名链接」并通过 API 下发

前端可以对预签名链接直接发起 PUT 请求，这样我们可以收获的好处有：

  1. 更安全：永远不会因 暴露客户端代码 或 被反编译 而泄露至关重要的 AccessKey 和 SecretKey；
  2. 更灵活：利用显式指定 Content-Type 和 Content-Length 来防止客户端被破解，从而绕过业务策略的限制
  3. 低成本：统一由服务端传递预签名链接，客户端开发人员只需要完成 PUT HTTP 请求即可，不需要学习和调试不同语言下的 S3 SDK（事实证明，AWS SDK不同的语言版本由不同的团队维护，其规范、特性差异较大，不利于项目稳定。）
  4. 高性能：上传请求依然是直接对 缤纷云 S4 发起，不需要服务端中转。

​
如何运作

1

通过后端 API 生成用于上传的预签名链接：putObject-presigned-url

让后端程序（golang、python、php、nodejs）调用相应的 SDK 生成一个具有 PutObject 方法效力的「预签名」链接传递给 Web 页面的 Javascript 脚本。

2

客户端对 putObject-presigned-url 发起 PUT 请求，并完成文件上传

Javascript 脚本利用 网络请求组件（如 axios）来将本地文件 PUT 到上面提到的「预签名 PutObject 链接」

​
不同语言后端接口生成 PutObject 预签名链接示例：

​
前端上传示例：

upload_demo.web.html
<!DOCTYPE html>
<html>
<head>
  <title>S3 File Upload</title>
</head>
<body>
<div>
  <h1>S3 File Upload</h1>
  <input type="file" id="file">
  <button onclick="handleClick()">Upload</button>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js"></script>
<script>
    let file;
    let fileContent;

    const fileInput = document.getElementById('file');
    const fileReader = new FileReader();

    fileInput.addEventListener('change', function (event) {
        file = event.target.files[0];
        console.log("file is: ", file);
        fileReader.readAsArrayBuffer(file);
    });

    fileReader.onload = function (event) {
        fileContent = event.target.result;
        // console.log("fileContent is: ", fileContent);
    };

    function handleClick() {
        console.log('click');

        const url = `/s3_upload_url`;
        const params = {key: '1.jpg'};

        axios.get(url, {params: params})
            .then(function (res) {
                console.log(res);
                const url = res.data.url;
                const config = {
                    headers: {
                        'Content-Type': null,
                    },
                };
                axios.put(url, file, config)
                    .then(function (res) {
                        console.log("res is: ", res);
                    });
            });

    }
</script>

</body>
</html>
上面的 Javascript 脚本在发起 Put 请求时将「Content-Type」设置为空值，建议使用缤纷云独有的 MIME 自动检测 功能。
上传时自动检测 MIME