Vue+element-ui文件上传阿里云oss+预览word 、excel、ppt、pdf、png、jpg

首先下载阿里云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;">
				<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="preview(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: '80%',
		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)
	})
},
//文件预览
preview(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;
	}

最后贴图：