antd upload preview svga 上传组件预览非图片

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

 

标签：svga,url,list,upload,item,file,antd,preview,icon
来源： https://www.cnblogs.com/dhjy123/p/15320231.html