一、场景介绍
前端使用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缩略图展示特定文件样式没有出现图裂的情况，预览按钮也可以正常点击功能正常了。