VUE 使用亚马逊（AWS）上传文件，及跨域配置的问题

1.关于获取accessKeyId，secretAccessKey可参考AWS的S3服务如何获取Access key ID和Secret access key - 程序员大本营

2.设置上传跨域的问题

找到权限的配置，进入后拉倒底部，设置CORS设置可参考官网文档CORS configuration - Amazon Simple Storage Service设置，我此处设置的是

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
             "允许跨域的域名" //如开发环境http://localhost:9527
        ],
        "ExposeHeaders": []
    },
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "允许跨域的域名" //如开发环境http://localhost:9527
        ],
        "ExposeHeaders": []
    },
    {
        "AllowedHeaders": [],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

进入正题，上传中的前奏我就不列了，根据自己的需求去编写，我使用的vue+elemnetUI,获取文件流后直接提交亚马逊

 

 // 生成的文件名称
      let suffix=".png";
      const objName = getFileNameUUID() + suffix
    
      
      let accessKeyId = "AKIA...."
      let secretAccessKey ="ufsSN..."

      let s3 = new AWS.S3({
        'apiVersion' : '2006-03-01',//版本
        'accessKeyId' : accessKeyId,//accessKeyId
        'secretAccessKey' : secretAccessKey,//secretAccessKey
        'sessionToken' : ""
      });
      var date=new Date;
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      let params = {
        Bucket: 'virtualframer', /* 储存桶名称 */
        Key: `frame/originalImage/${year}/${month}/${objName}`, /* 储存地址及文件名 */
        Body: option.file//文件流
      };
      s3.putObject(params, (err, data) =>{
        if (err) {
          console.log('失败');
          console.log('失败',err) 
        } else {
          // successful response
          console.log('成功');
        }

      });

运行~~~~~~~~

 

AWS上已经可以看到刚刚上传的文件