一、场景介绍
前端使用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组件缩略图是组件内部实现无法修改![缩略图API](https://img-blog.csdnimg.cn/39243c5ba9204b04ad8d62de86e0d8d2.jpeg#pic_center)
缩略图无法修改可以显示设置的图片代替,那么接下来就是解决预览按钮置灰无法点击的问题了。
上传文件改变时的回调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缩略图展示特定文件样式没有出现图裂的情况,预览按钮也可以正常点击功能正常了。