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

一、场景介绍

前端使用vue2版本，组件库使用antdesign vue。

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

二、问题描述

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

[antdesign vue](https://ant-design.gitee.io/components/upload-cn/#components-upload-demo-picture-style)

三、解决方案

查看组件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缩略图展示特定文件样式没有出现图裂的情况，预览按钮也可以正常点击功能正常了。