Vue大文件分片上传 直连AWS S3

前言

前端使用vue2+elementui2.15.6+axios0.23.0 上传文件，直连AWS S3。进度条使用elementui2.0中的progress进度条组件。

vue中安装的aws-sdk为2.235.1版本，即AWS SDK for JavaScript版本2，非最新的版本3

现存问题：版本3缺少认证Amazon cognito身份认证，所在宁夏区，无此服务。不清楚如何使用accessKeyId和secretAccessKey代替cognito直连s3上传。故使用版本2。

参考链接：

https://aws.amazon.com/cn/blogs/china/s3-multipul-upload-practice/

https://www.cnblogs.com/lyjfight/p/12942829.html

重要：：虽然我很菜，写的也不够好，但我不接受任何批评，本文仅供有需要的人参考及自己记录用。

效果截图

点击文件上传按钮，选择文件，分片上传，进度条由0到100%，上传过程中，按钮禁止点击。

代码实现

安装aws-sdk

npm install aws-sdk@2.235.1

需要获取AWS的accessKeyId、secretAccessKey、region以及存储桶名称。存储桶需要配置CORS(跨资源共享)

完整代码

s3 存储桶CORS

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag",
            "x-amz-meta-custom-header"
        ]
    }
]