使用element-UI 上传组件实现多类型文件预览

功能需求： 详情展示页点击后可以展示图片或者文件（被测试提出的bug）

先看下之前写的、只是给组件中加了个 disabled 进行了点击阻止

考虑到页面不同类型的文件预览 就新增了on-preview事件

<el-upload action="" :file-list="objectValue.fileInfoList" :on-preview="handlePreview" disabled />

逻辑代码块（通过事件过滤其url 判断类型进行渲染）

 // 文件下载
    handlePreview(file) {
      if (!file.url) {
        this.$message.error('下载失败')
        return
      }
      const type = file.url.split('.')[4]
      // 判断文件类型
      if (type === 'doc' || type === 'docx' || type === 'xlsx' || type === 'xls' || type === 'ppt' || type === 'pptx') {
        // 在当前浏览器直接下载
        document.location.href = file.url
      } else {
        // 图片在浏览器打开 新的页面展示
        window.open(file.url, 'hello')
      }
    }

哭着给我老大求来的… 比较简洁就写下来了