首先下载阿里云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./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",}}
//方法//自定义上传方式，上传至阿里云osssuccess(obj) {//获取文件大小let size = this.getNum.getFileSize(obj.file.size)var fileName = this.prehensivePractice + 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+urlif (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+urlthis.showPdf = true} else if (type.indexOf("jpg") != -1 || type.indexOf("png") != -1 || type.indexOf("jpeg") != -1) {this.showImg = truethis.imagesUrl = this.alOssUrl+urllet 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;}
最后贴图：
