vue aws s3直传图片到阿里云oss

本来之前的ali-oss用的好好的，但是后端说，要用s3，可以兼容多种形式的上传。so有了这篇文章。

代码：

<template>
    <el-upload class="avatar-uploader" 
      v-model="Addfrom.url" 
      action=""
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-change="handleChange"
      :file-list="fileList"
      :auto-upload="false"
      :multiple = true 
      :before-upload="handleBeforeUpload" 
      :limit="8">
      <div v-for="(item,index) in imageList" :key="index">
        <img :src="item" class="avatar" :alt="item">
        <p>{{item}}</p>
      </div>
      
      <!-- <i v-else class="el-icon-plus avatar-uploader-icon" style="font-size:50px"></i> -->
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    </el-upload>             
</template>
<script>
  import OSS from "ali-oss";
  import AWS from "aws-sdk" 
  import Minio from "minio" 
  export default {
    data() {
      return {
        fileList: [],
        imageList:[],
        Addfrom:{
          url:''
        },
        awsClient:undefined
      };
    },
    methods: {
      // 上传文件之前的方法
			handleBeforeUpload(file) {
				const isJPEG = file.name.split('.')[1] === 'jpeg';
				const isJPG = file.name.split('.')[1] === 'jpg';
				const isPNG = file.name.split('.')[1] === 'png';
				const isWEBP = file.name.split('.')[1] === 'webp';
				const isGIF = file.name.split('.')[1] === 'gif';
				const isLt500K = file.size / 1024 / 1024 / 1024 / 1024 < 4;
				if (!isJPG && !isJPEG && !isPNG && !isWEBP && !isGIF) {
					this.$message.error('上传图片只能是 JPEG/JPG/PNG 格式!');
				}
				if (!isLt500K) {
					this.$message.error('单张图片大小不能超过 4mb!');
				}
				return (isJPEG || isJPG || isPNG || isWEBP || isGIF) && isLt500K;
			},
      submitUpload() {
        this.doUpload();
      },
      handleChange(file, fileList){
        this.fileList = fileList
        console.log(this.fileList);
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },

      //批量上传
      doUpload(){
        for(var i =0;i<this.fileList.length;i++){
          console.log('这个',this.fileList[i].raw)
          let fileName = `${new Date().format('yyyyMMdd/')}` + `${this.fileList[i].raw.uid}` + '.jpg'; //定义唯一的文件名
          let s3 = new AWS.S3({
            endpoint: 'https://oss-cn-beijing.aliyuncs.com',
            accessKeyId: 'LTxxxxxxxxxxxxxxxxRAQn',
            secretAccessKey: 'Nxexxxxxxxxxx5GG2',
          });
          console.log('看看',fileName)
          let params = {
            Bucket: 'xxx-oss', /* 储存桶名称 */
            ContentType: this.fileList[i].raw.type,
            Body: this.fileList[i].raw,
            ACL: "public-read",
            Key: fileName, /* 储存地址及文件名 */
          };
          s3.putObject(params, (err, data) =>{
            if (err) {
              console.log('失败',err) 
            } else {
              // successful response
              console.log('成功',err,data) 
            }
          });
        }
      },

    },
    created(){
    }
  }
</script>

<style scoped lang="scss">
  .avatar{
    width: 300px;
  }
</style>