node_modules\ant-design-vue\es\upload\UploadList.js
修改源码render函数,其实改的是渲染出来的样式,包括背景图和预览icon
var list = items.map(function (file) {
// 重点这里判断svga const svgaFlg = file.name.includes('svga') if(file.status === 'done' && file.response){ file.url = 'https://qnp.chumanapp.com/' + file.response.key } var _classNames, _classNames2; var progress = void 0; var icon = h(Icon, { attrs: { type: file.status === 'uploading' ? 'loading' : 'paper-clip' } }); if (listType === 'picture' || listType === 'picture-card') { if (listType === 'picture-card' && file.status === 'uploading') { icon = h( 'div', { 'class': prefixCls + '-list-item-uploading-text' }, [locale.uploading] ); } else if (!file.thumbUrl && !file.url && !svgaFlg ) { // 重点这里,当不是svga的时候,跳过这里 icon = h(Icon, { 'class': prefixCls + '-list-item-thumbnail', attrs: { type: 'picture', theme: 'twoTone' } }); } else { var thumbnail = isImageUrl(file) ? h('img', { // 重点这里, 是svga的时候 attrs: { src: file.thumbUrl || file.url, alt: file.name }, 'class': prefixCls + '-list-item-image' }) : h(Icon, { attrs: { type: 'file', theme: 'twoTone' }, 'class': prefixCls + '-list-item-icon' }); icon = h( 'a', { 'class': prefixCls + '-list-item-thumbnail', on: { 'click': function click(e) { return _this2.handlePreview(file, e); } }, attrs: { href: file.url || file.thumbUrl, target: '_blank', rel: 'noopener noreferrer' } }, [thumbnail] ); } } ....
最后解决的办法,并没有改源码,只是改了css样式
<style lang="less"> .uploadByFanWrap .uploadByFanItem{ .ant-upload-list-item-actions{ a{ pointer-events: auto !important; opacity: 1 !important; } } } </style>
// 预览函数<a-modal v-if="giftVisible" destroyOnClose v-model="giftVisible" @cancel="giftVisible = false" title="查看SVGA动效" :footer="null"> <div id="svga" style="max-height: 300px;"></div > </a-modal>
handlePreviewFile (file) { if (!file.url) { file.url = `${this.constv.QINIU_OFFICIAL_CDN_URL}${file.response.key}` } this.giftVisible = true this.$nextTick(() => { showSVGA('#svga', file.url) }) },import { showSVGA } from '@/utils/util' "svgaplayerweb": "^2.3.1",