elementUI 上传文件展示自定义的预览图

效果：展示自定义的预览图

第一步：

<div slot="file" slot-scope="{file}">
  // 图片展示
  <img
       src="" alt=""
       :src="file.url"
       class="el-upload-list__item-thumbnail"
       >
  // 文件名称
  <p class="file-title" style="text-align: center;">{{file.name}}</p>
</div>

第二步：

init () {
  // 方法用于处理多个文件的回显展示问题
  function fileUrlList (fileUrl) {
    console.log(fileUrl, '查看文件')
    let fileUrlData = fileUrl.split(',')
    let fileNumber = fileUrlData.length
    let fileList = []
    for (let i = 0; i < fileNumber; i++) {
      fileList.push({name: fileUrlData[i].split('|')[0], url: fileUrlData[i].split('|')[1]})
      console.log(fileList, 999)
    }
    return fileList
  },
    //对获取的文件进行处理
  this.MissionBook = fileUrlList(data.achievement.achievementFile)
  // 遍历获取的文件个数
  let misbookLength = this.MissionBook.length
  // 对每一个文件进行处理的操作
  for (let i = 0; i < misbookLength; i++) {
    // 获取到文件的名称并保存
    let MissionBookName = this.MissionBook[i].name
    // 获取到文件的链接并保存
    let MissionBookUrl = this.MissionBook[i].url
    // 获取到文件链接的后缀信息
    let MissionBookHouzui = MissionBookUrl.split('.')[4]
    // 对各种后缀进行对应的处理，在这一步中对文件的 url 进行替换为自定义的图片，用于展示预览效果，并将真实的 url 自定义一个名称进行保存，便于后续使用
    switch (MissionBookHouzui) {
      case 'png':
      case 'jpg':
      case 'jpeg':
        this.MissionBook[i] = {
          name: MissionBookName,
          url: MissionBookUrl,
          downloadUrl: MissionBookUrl
        }
        break
      case 'xlsx':
      case 'xls':
        this.MissionBook[i] = {
          name: MissionBookName,
          url: require('@/assets/img/EXCEL.png'),
          downloadUrl: MissionBookUrl
        }
        break
      case 'pdf':
        this.MissionBook[i] = {
          name: MissionBookName,
          url: require('@/assets/img/Pdf.png'),
          downloadUrl: MissionBookUrl
        }
        break
      case 'doc':
      case 'docx':
        this.MissionBook[i] = {
          name: MissionBookName,
          url: require('@/assets/img/WORD.png'),
          downloadUrl: MissionBookUrl
        }
        break
    }
  }
}