vue中上传并展示svga

小小落魄

已于 2022-04-27 10:08:14 修改

阅读量2.7k

点赞数

分类专栏： vue开发记录文章标签： vue

于 2022-04-26 18:33:03 首次发布

本文链接：https://blog.csdn.net/qq_45966018/article/details/124434115

版权

vue开发记录专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、上传此处用el-upload 添加属性accept=“.svga” 只能上传svga格式的文件

<el-upload
          class="upload-demo"
          :action="actionUrl"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :http-request="uploadProductPic"
          accept=".svga"
          :on-error="errorUpload"
          :before-upload="beforeAvatarUpload"
          :file-list="fileList"
          :on-remove="doDeleteImg"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>

详细方法：

async upload(file) {
            try {
                const response = await cosUploadInfo()
                console.log('response', response)
                const cos = new COS({
                    SecretId: response.secret_id, // 身份识别ID
                    SecretKey: response.secret_key // 身份秘钥
                })
                if (file) {
                    // 执行上传操作
                    cos.putObject({
                        Bucket: response.bucket, /* 存储桶 */
                        Region: response.region, /* 存储桶所在地域，必须字段 */
                        Key: 'liveGift' + '/' + this.guid(), /* 文件名 */
                        StorageClass: 'STANDARD', // 上传模式, 标准模式
                        Body: file, // 上传文件对象
                        onProgress: function(progressData, callback) {
                            console.log(progressData)
                        }
                    }, (err, data) => {
                        console.log('err', err)
                        console.log('data', data)
                        console.log('文件-----', data.Location, '文件地址------') // 可以拿到文件地址
                        // 上传成功之后
                        if (data.statusCode === 200) {
                            this.ruleForm.MovingImg = this.getCaption(data.Location)
                            console.log(this.ruleForm.MovingImg)
                            this.svgaBoxShow = true
                            this.$nextTick(() => {
                                var mycanvas = document.getElementById('giftStyleAdd')
                                // 修改容器大小
                                mycanvas.style.width = 146 + 'px'
                                mycanvas.style.height = 146 + 'px'
                                // 这里动态给ID，列表
                                this.player = new SVGA.Player('#giftStyleAdd')
                                var parser = new SVGA.Parser('#giftStyleAdd')
                                // 这里使用动态加载的方式
                                parser.load('https://' + data.Location, (videoItem) => {
                                    console.log(videoItem)
                                    this.widthDialog = String(videoItem.videoSize.width)
                                    this.player.setVideoItem(videoItem)
                                    this.player.startAnimation()
                                })
                            })
                        }
                    })
                }
            } catch (e) {
                console.log('catch', e)
            }
        },

3、展示svga步骤

1、npm i svgaplayerweb
2、import SVGA from ‘svgaplayerweb’;
3、添加元素
<div id="giftStyleAdd" class="svga" />
4、创建方法
// 展示svga方法 async showSvg(url) { this.$nextTick(() => { var mycanvas = document.getElementById('giftStyleAdd') // 修改容器大小 // mycanvas.style.width = 146 + 'px' // mycanvas.style.height = 146 + 'px' var player = new SVGA.Player('#giftStyleAdd') var parser = new SVGA.Parser('#giftStyleAdd') parser.load(url, function(videoItem) { player.setVideoItem(videoItem) player.startAnimation() }) }) },
5、需要时调用 showSvg 方法