vue 前端项目上传文件到AWS Amazon S3 存储桶

最近公司有项目需要将原先服务器上的图片转移到AWS的S3 储存桶中 ，前端的上传图片也需要重新编写，后台管理是用Vue 写的 ；

因此本套代码主要用在Vue中，其他前端框架可参考

1.先在项目用引入aws-sdk

npm install  aws-sdk --save

2.在utils文件中创建aws.js文件

var AWS = require('aws-sdk');

// Set the region 
AWS.config.update({
    region: 'cn-northwest-1',//aws服务器所在地区编号    --  小编用的是aws宁夏服务器
    apiVersion: '2006-03-01',
    accessKeyId: 'XXXXXXXX',  // keyID
    secretAccessKey: 'XXXXXXXXXXXXXXXX'  //秘钥
});
//创建 aws 服务
var s3 = new AWS.S3();
export function AwsUpdate(file) {
    var uploadParams = { 
      Bucket: 'bsd-test',//桶名称
      Key: file.name, //图片名称
      Body: file,// file
      "ACL": "public-read", //类型
      'Access-Control-Allow-Origin': '*' //策应请求头
    };
    var imgFile = new Promise(function(resolve) {
        //做一些异步操作
        s3.upload(uploadParams, function(err, data) {
            if (err) {
                console.log("Error", err);
            }
            if (data) {
                resolve(data);
            }
        });
    });
    return imgFile
}

3.在.vue 文件中调用

<template>
  <div>
    <div
      style="width: 150px; height: 150px; border: 1px solid #ccc"
      @click="section()"
    ></div>
    <input
      type="file"
      ref="iconFile"
      @change="fileChange"
      name="file"
      style="display: none"
    />
    <img
      :src="imgUrl"
      alt=""
      srcset=""
    />
  </div>
</template>
<script>
import { AwsUpdate } from "@/utils/aws";
export default {
  created() {},
  data() {
    return {
      imgUrl: "",
    };
  },
  methods: {
    section() {
      //通过refs属性来获取点击事件，点击div实则点击input
      this.$refs.iconFile.click();
    },
    fileChange(e) {
      // console.log(e.target.files[0], "file change");
      let file = e.target.files[0];
      //通过后端获取到上传参数
      AwsUpdate(file).then(res=>{
        console.log(res,'home')//后端返回的image文件数据
      })
    },
  },
};
</script>

到此 就可以上传文件到AWS S3储存桶里了

踩坑记录

在写项目的时候由于 没有在AWS控制台设置CORS 导致前端一直在报跨域问题
因此一定要在AWS控制台做CORS配置

<?xml version="1.0" encoding="UTF-8"?>

<CORSConfiguration xmlns="http://s3.amazonaws.com/">

<CORSRule>

    <AllowedOrigin>*</AllowedOrigin>

    <AllowedMethod>PUT</AllowedMethod>

    <AllowedMethod>POST</AllowedMethod>

    <AllowedMethod>DELETE</AllowedMethod>

    <AllowedMethod>GET</AllowedMethod>

    <AllowedMethod>HEAD</AllowedMethod>

    <MaxAgeSeconds>3000</MaxAgeSeconds>

    <AllowedHeader>*</AllowedHeader>

</CORSRule>

</CORSConfiguration>

官方参考链接