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{
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",