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;">
			/*自定義上傳事件 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;
	}

最后貼圖：