Element-UI ： Upload 上傳文件再編輯顯示的兩種方式

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;
                }
            },
        }

最后的頁面顯示如下：