其他分享
首页 > 其他分享> > antd upload preview svga 上传组件预览非图片

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