antdesign vue upload上传pdf缩略图无法预览问题

一、场景介绍

前端使用vue2版本，组件库使用antdesign vue。
因为项目里面要实现一个上传资质文件的的功能，要求是能够上传多条资质数据，每条资质数据文件段可以上传多个文件，这里文件格式要求支持格式：.jpg .png .pdf ，单个文件不能超过20MB。上传后缩略图上有预览和删除的按钮并能点击实现对应功能。

二、问题描述

a-upload照片墙的代码可以在antdesign vue官网upload组件里找到，这里就不重复了（下面附上官方网址）
antdesign vue

三、解决方案

查看组件api可以知道a-upload组件是支持图片和文件夹上传的，但是这里是没有上传pdf相关的说明。
API里的accept属性：接受上传的文件类型, 详见 input accept Attribute，为了实现上传pdf。

a-upload：

<a-upload
   name="file"
   :action="uploadUrl"
   :beforeUpload="beforeUpload"
   :headers="imgHeaders"
   :file-list="ite.uploadPath"
   :data="{ useOriginalFilename: true }"
   list-type="picture-card"
   @preview="handlePreview"
   @change="uploadChange($event, index)"
 >
   <div v-if="ite.uploadPath.length < 10">
     <img style="width: 58px; height: 42px" src="~@/assets/upload.png" />
     <div style="margin-top: 8px">上传资料</div>
   </div>
 </a-upload>

注意：@change=“uploadChange($event, index)”

accept：

const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'application/pdf

上传前的钩子：

beforeUpload (file, fileList) {
      console.log(file)
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'application/pdf'
      return new Promise((resolve, reject) => {
        if (!isJpgOrPng) {
          this.$message.error('支持.jpg .png .pdf ，单个文件不能超过20MB')
          reject(file)
        }
        if (file) {
          const size = file.size / 1024 / 1024
          if (size > 20) {
            this.$message.error('图片大小不能超过20M')
            reject(file)
          }
          resolve(file)
        }
      })
    },

到这里上传pdf过程没有报错（小开心一把，不用自己单独封装一个了）。但是还有问题，上传虽然没有报错，但是上传的pdf图裂了，而且预览按钮是置灰无法点击状态。找原因，判断是pdf上传还没有到done状态就执行了缩略图展示操作，a-upload组件缩略图是组件内部实现无法修改
缩略图无法修改可以显示设置的图片代替，那么接下来就是解决预览按钮置灰无法点击的问题了。

上传文件改变时的回调uploadChange ：

// 图片上传函数
    uploadChange ({ fileList }, blIndex) {
      console.log(fileList)
      const _this = this
      this.qualificationsList[blIndex].uploadPath = fileList
      this.qualificationsList[blIndex].uploadPath.map((item, index) => {
        // console.log(item, item.response.data, item.response)
        if (item.response) {
          item.url = _this.baseUrl + item.response.data.path
        }
      })
      console.log(this.qualificationsList)
    },

到这里发现没有url的地址，这里判断收到后端返回值时将url的地址附上去，重新上传pdf缩略图展示特定文件样式没有出现图裂的情况，预览按钮也可以正常点击功能正常了。