auve上传doc,xls,pdf 等等文件时，由于没有图片，显示空白，感觉不友好，明明上传了，有内容，但是显示全空白，
因为我上传的内容既有图片，又有文件，所以我不能采用列表式，因为这样我无法预览图片，
改造后：1.把文件名字显示出来，2.如果是文件，则显示下载，点击下载，可以下载文件。
html：
<el-tab-pane label="合同附件" name="third">
<!--这里是原来的avue上传图片,有问题的，avue上传图片有一个很大的bug，-->
<!--删除图片的事件:upload-delete="uploadDelete" 我delete的时候，居然获取 不到当前删除图片的下标。。。这样就致命了-->
<!--<avue-form ref="form" v-model="form" :option="pictureOption" :upload-after="uploadAfter">-->
<!--</avue-form>-->
<!-- 所以只能用回element
action 接口
list-type设置文件列表的样式。
handlePreview 预览
uploadSuccess 上传成功的回调
beforeRemove 删除的回调
fileList 上传的文件数组
uploadHeader 传给后台的请求头
-->
<el-upload v-model="form"
class="upload-demo inline-block"
action="/api/image/upload?type=contract"
list-type="picture-card"
:on-preview="(file)=>{return handlePreview(file )}"
:on-success="(res,file,fileList)=>{ return uploadSuccess(res,file, fileList)}"
:before-remove="beforeRemove"
:file-list="fileList"
:headers="uploadHeader">
<i class="el-icon-plus"></i>
</el-upload>
<!--把图片标题显示出来-->
<ul class="download-imgs">
<li class="need-enclosure clearfix" v-for="(item, index) in attachment" :key="index">
<!--正则判断文件类型，是doc，xls文件则显示下载二字-->
<a class="preview" @click="handleDownload(index)" v-if="(/.docx|.pdf|.xls|.xlsx|.ppt|.doc|.txt/).test(item)">下载</a>
<p>{{item }}</p>
</li>
</ul>
<!--element一个预览图片的组件 -->
<el-image-viewer v-if="showImgView" :on-close="closeViewer" :url-list="showImgList" :z-index="3000" />
</el-tab-pane>
data:
attachment:[], showImgView: false, showImgList:[], fileList:[], uploadHeader:uploadHead(),
js：有点复杂，是因为需求不同。。图片的预览下载，放大方法都自己写。
displayImg(file,q){
//正则判断文件后缀是不是图片
let w = q.substring(q.lastIndexOf("."))
const reg = RegExp(/(?:png|jpg|jpeg|JPG|PNG|JPEG)$/)
let result = reg.test(w);
if(result){
if(file){
this.showImg(file)
}
}else{
//下载文件
var a = document.createElement('a');
var event = new MouseEvent('click');
a.download = file.name;
a.href = file.url;
a.dispatchEvent(event);
}
},
//点击加号按钮，如果是图片就预览，如果是文件就下载
handlePreview(file){
//新增图片预览
if(file.name){
let q = file.name
//这里要判断用户此时是在新增图片，还是编辑的时候，预览以前上传的图片，
// 因为上传时，我能获得文件名字，但是文件名字并没有保存到后台，
// 所以预览的时候只能根据图片地址去判断文件类型。
this.displayImg(file,q)
}else{
// 单纯预览以前的图片
let q = file.url
this.displayImg(file,q)
}
},
showImg(img) {
let a = img.url
this.showImgList.push(a)
this.showImgView = true
},
//下载图片
handleDownload(img){
let a = this.fileList[img]
this.handlePreview(a)
},
closeViewer() {
this.showImgView = false
},
uploadSuccess(rep, file, fileList){
console.log(rep, file, fileList)
let a = staticUrl+file.response.data
this.fileList=fileList
//获取文件名字，上传pdf，doc时显示文件名字
this.attachment.push(file.name)
},
beforeRemove(file,fileList,index) {
for(let i = 0; i < this.attachment.length; i++){
if(this.attachment[i] == file.name){
this.attachment.splice(i,1);
}
}
},
css：
.need-enclosure{
display: inline-block;
margin-right:5px;
position: relative;
padding-left: 24px;
}
.need-enclosure p { /* 文件名过长后显示省略号 */
width: 128px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.preview {
position: absolute;
left: 46px;
bottom: 47px;
cursor: pointer;
border: 1px solid #ddd;
padding: 0 10px;
color: green;
}
.preview-img {
width: 70px;
height: 47px;
}
.natural-img{
width: 90px;
height: 67px;
}
.need-enclosure:hover .img-hover{
display: block;
}