首先下载阿里云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;
}
最后贴图：
转载：https://blog.csdn.net/qq_40788898/article/details/111947352
查看评论