1.直接将文件名以文本的方式展现
后台返回的链接以逗号的形式分隔,初始化定义一个数组:files: []
页面结构:
<el-upload
class="upload-demo"
ref="upload"
:action="actionPath"
:file-list="files" >
<el-button slot="trigger" size="small" type="primary">选取文件</el-button
</el-upload>
处理后台返回的文件链接代码:
let vm = this;
if(res.attachment) { //后台返回的文件链接
let a = (res.attachment).split(',');
if(a.length > 0) {
a.forEach(item => {
var obj = {}
let index = item.lastIndexOf('\/');
let fileName = item.substring(index + 1, item.length); //最后的文件名截取出来
vm.$set(obj,'name',fileName);
vm.$set(obj,'url',item); //修改files里面的结构(name,url)
vm.files.push(obj);
})
}
}
最后的页面显示如下:
2.以图标的方式展现
页面结构及相关CSS:
<ul class="download-imgs">
<li class="need-enclosure clearfix" v-for="(item, index) in attachment" :key="index">
<img class="natural-img" :src="item" v-if="(/.png|.jpg|.jpeg/).test(item)" style="position:relative" >
<img :src="downLoadImg(item)" v-else style="position:relative">
<p>{{item | formatName}}</p>
<div class="img-hover">
<div class="preview" v-if="(/.png|.jpg|.jpeg/).test(item)" @click="showImg(item)">预览</div>
<a class="preview" :href="item" target="_blank" v-else-if="(/.pdf|.txt/).test(item)">预览</a>
<a class="preview" :href="item" v-else>下载</a>
</div>
</li>
</ul>
<!--点击图片放大dialog-->
<el-dialog :visible.sync="dialogImg">
<img width="100%" :src="imgExpand" alt="">
</el-dialog>
.need-enclosure{
display: inline-block;
margin-right:5px;
position: relative;
}
.need-enclosure p { /* 文件名过长后显示省略号 */
width: 90px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.preview {
position: absolute;
left:20px;
bottom:20px;
cursor: pointer;
border: 1px solid #fff;
padding: 0 10px;
color: #fff;
}
.preview-img {
width: 70px;
height: 47px;
}
.natural-img{
width: 90px;
height: 67px;
}
.need-enclosure:hover .img-hover{
display: block;
}
.img-hover {
width: 90px;
height: 67px;
background: rgba(29,29,30,0.7);
position: absolute;
top: 0;
left: 0;
display: none;
}
初始化数据:
downLoadImgs:[
{type:0,url:'/static/images/bg_image.png'},
{type:1,url:'/static/images/doc.png'},
{type:2,url:'/static/images/ppt.png'},
{type:3,url:'/static/images/excel.png'},
{type:4,url:'/static/images/txt.png'},
{type:5,url:'/static/images/pdf.png'},
{type:6,url:'/static/images/zip.png'}
],
处理后台返回文件链接:
//返回显示文件图标的地址函数
downLoadImg(item){
if(/.txt/.test(item)){
return this.downLoadImgs[4].url;
}else if(/.doc|.docx/.test(item)){
return this.downLoadImgs[1].url;
}else if((/.png|.jpg|.jpeg/).test(item)){
return this.downLoadImgs[0].url;
}else if(/.ppt|pptx/.test(item)){
return this.downLoadImgs[2].url;
}else if(/.xls/.test(item)){
return this.downLoadImgs[3].url;
}else if(/.zip|.rar/.test(item)){
return this.downLoadImgs[6].url;
}else if(/.pdf/.test(item)){
return this.downLoadImgs[5].url;
}
},
//预览执行结果的图片
showImg(url) {
this.imgExpand = url;
this.dialogImg = true;
},
显示文件名的过滤器:
filters: {
formatName(cellvalue){
//console.log(cellvalue)
if(cellvalue.length > 9){
let index = cellvalue.lastIndexOf('\/');
let demandName = cellvalue.substring(index + 1,cellvalue.length)
return demandName;
}else {
return cellvalue;
}
},
}
最后的页面显示如下: