vue+element ui+el-upload+oss

1.安装ali-oss
2.main.js

const OSS = require('ali-oss');
Vue.prototype.client= new OSS({
    accessKeyId: '',  // 查看你自己的阿里云KEY
    accessKeySecret: '', // 查看自己的阿里云KEYSECRET
    bucket: '', // 你的 OSS bucket 名称
    region: 'oss-cn-beijing', // bucket 所在地址，我的是 华北2 北京
    cname:true, // 开启自定义域名上传
    endpoint:"" // 自己的域名
});

3.页面应用

<template>
	<el-upload
        class="avatar-uploader"
        action=""
        :show-file-list="false"
        :http-request="fnUploadRequest"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
  >
    <img
      v-if="dataForm.logo"
      :src="dataForm.logo"
      class="avatar"
    />
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
 </template> 
 <script>
 	export default {
  data () {
    return {
    }
  },
  methods: {
    //图片上传成功回调
        handleAvatarSuccess(res) {
          console.log('成功回调',res)
            if (res) {
              this.dataForm.logo = res.url
              console.log('进入res',this.dataForm.logo)
            }
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },

        async fnUploadRequest(options) {
            try {
                let file = options.file; // 拿到 file
                let fileName = file.name.substr(0,file.name.lastIndexOf('.'))
                let date = new Date().getTime()
                let fileNames = `${date}_${fileName}` // 拼接文件名，保证唯一，这里使用时间戳+原文件名
                // 上传文件,这里是上传到OSS的 uploads文件夹下
                this.client.put("uploads/"+fileNames, file).then(res=>{
                    console.log('resss',res)
                    if (res.res.statusCode === 200) {
                        options.onSuccess(res)
                    }else {
                        options.onError("上传失败")
                    }
                })
            }catch (e) {
                options.onError("上传失败")
            }
        }
  }
}
 </script>