首先下载阿里云oss

npm i ali-oss --save

新建ali_oss.js

// /**
// * [accessKeyId] {String}：通过阿里云控制台创建的AccessKey。
// * [accessKeySecret] {String}：通过阿里云控制台创建的AccessSecret。
// * [bucket] {String}：通过控制台或PutBucket创建的bucket。
// * [region] {String}：bucket所在的区域， 默认oss-cn-hangzhou。
// */
var OSS = require('ali-oss');
export function client() { 
  var client = new OSS({ 
    region: 'oss-cn-chengdu',
    accessKeyId: '*************',
    accessKeySecret: '*************',
    bucket: '*************'
  })  
  return client
}

需要使用的页面引用

import { client} from '../../../util/js/ali_oss.js'

自定义上传预览删除
html：

<el-button @click="dialogVisible3 = true">
				上传
		</el-button>
		<el-dialog title="活动资料" :visible.sync="dialogVisible3" width="680px" center>
			<div style="max-height: 70vh;overflow-y: scroll;">
			/*自定义上传事件 http-request*/
				<el-upload ref="upload" class="upload-demo" drag action :http-request="success" :before-upload="beforeAvatarUpload"
				 multiple>
					<div class="el-upload__text"><em style="margin-right: 10px">选择文件</em>或者将文件拖入框内</div>
					<div class="el-upload__tip" slot="tip">提示：支持上传文件格式：doc，docx，ppt，pptx，xls，xlsx，pdf，单个文件大小在50M以内。</div>
				</el-upload>
				<div class="my-upload-list">
					<div v-for="(item,index) in urlList">
						<div>
							<i class="el-icon-s-order my-file"></i><span>{ { item.name}} <span v-if="item.size!= '' ">{ { '('+item.size+')'}}</span></span>
							<span class="my-close" @click="delList(item.id)">删除</span>
							<span class="show-flie-open" @click="showFile(item.path)">预览</span>
						</div>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer" style="text-align: center;">
				<el-button @click="dialogVisible3 = false">取 消</el-button>
				<el-button type="primary" @click="dataSruse">确 定</el-button>
			</div>
			<el-dialog title="文件预览" :visible="showDoc == true || showPdf == true || showImg == true" :width="fileWidth" class="dialog-div-pre-style"
			 :before-close="closePreviewClick" center append-to-body>
			 
				<div v-if="showDoc == true">
					<iframe frameborder="0" :src="'https://view.officeapps.live.com/op/view.aspx?src=' + this.fileUrl" width='100%'
					 height="800px">
					</iframe>
				</div>
				<div v-else-if="showPdf == true"style="justify-content: center; align-items: center">
				/*这个是HTML 5 中的新标签*/
					<embed :src="pdfUrl" style="width: 100%; height: 80vh" />
				</div>
				<div v-else-if="showImg == true" style="justify-content: center; align-items: center;min-width: 40px;min-height: 40px;">
					<img :src="imagesUrl" alt="" style="width: 100%;height: auto;">
				</div>
			</el-dialog>
		</el-dialog>

js：

data(){ 
	return{ 
		// 文件
		urlList: [],
		// 文件预览
		showDoc: false,
		showPdf: false,
		showImg: false,
		fileUrl: "",
		imagesUrl: "",
		pdfUrl: "",
		// dialog宽
		fileWidth: "min-width = 300px",
		}
}

//方法
//自定义上传方式，上传至阿里云oss
success(obj) { 
	//获取文件大小
	let size = this.getNum.getFileSize(obj.file.size)
	var fileName = this.file_path.base.comprehensivePractice + obj.file.name; //定义唯一的文件名
	//阿里云上传方法
	client().multipartUpload(fileName, obj.file).then(
		result => { 
			let obj2 = { 
				id: obj.file.uid,
				name: obj.file.name,
				url: result.res.requestUrls[0],
				path: result.name,
				size: size
			}
			this.urlList.push(obj2)
	})
},
//文件预览
showFile(url) { 
//this.alOssUrl是我自己阿里云的前缀，用于预览
	let type = this.alOssUrl+url;
	this.fileUrl = this.alOssUrl+url
	if (type.indexOf("doc") != -1 || type.indexOf("docx") != -1 || type.indexOf("xsl") != -1 || type.indexOf("xlsx") !=
		-1 || type.indexOf("ppt") != -1) { 
		this.fileWidth = '80%'
		this.showDoc = true
	} else if (type.indexOf("pdf") != -1) { 
		this.fileWidth = '80%'
		this.pdfUrl = this.alOssUrl+url
		this.showPdf = true
	} else if (type.indexOf("jpg") != -1 || type.indexOf("png") != -1 || type.indexOf("jpeg") != -1) { 
		this.showImg = true
		this.imagesUrl = this.alOssUrl+url
		let image = new Image();
		image.src = this.alOssUrl+url;
		image.onload = () => { 
			this.fileWidth = image.width + 'px'
		};
	}else { 
		this.$message("当前文件暂不支持预览")
	}
},
closePreviewClick() { 
	if (this.showDoc == true) { 
		this.showDoc = false
	} else if (this.showPdf == true) { 
		this.showPdf = false
	} else if (this.showImg == true) { 
		this.showImg = false
	}
},
// 删除文件
delList(id) { 
	this.urlList.map((item, index) => { 
		if (item.id == id) { 
			this.urlList.splice(index, 1)
		}
	})
},

css：由于需求，我手动隐藏了element-ui的文件列表，自己手写的，大家css样式自由发挥哦

/*隐藏*/
	.upload-demo /deep/ .el-upload-list { 
		display: none;
	}

最后贴图：