vue--Element-UI上传视频音频获取时

优雅格子衫

已于 2023-12-25 12:54:38 修改

阅读量1k

点赞数

分类专栏： element后台文章标签： vue.js javascript 前端 elementui

于 2023-10-03 18:42:34 首次发布

本文链接：https://blog.csdn.net/qq_61869009/article/details/133525212

版权

element后台专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.封装获取时间方法。

        getTimes(file) {
            var content = file;
            //获取录音时长
            var url = URL.createObjectURL(content);
            //经测试，发现audio也可获取视频的时长
            var audioElement = new Audio(url);
            audioElement.addEventListener("loadedmetadata", (_event) => {
               //保存获取时间长度
                this.dataFile.videoTime = parseInt(audioElement.duration)
            });
        },

2.再upload上传之前拿到上传的file文件，调用方法。

        //上传之前的操作
        // file.type.includes 文件类型判断
        beforeAvatarUpload(file) {
            if (file.type.includes('image')) {
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!');
                    this.isok = false
                } else {
                    this.isok = true
                    this.updataimg.fileKey = this.utypeTexe
                }

            }
            if (file.type.includes('video')) {
                this.getTimes(file)
                const isLt2M = file.size / 1024 / 1024 < 500;
                if (!isLt2M) {
                    this.$message.error('上传视频大小不能超过 500MB!');
                    this.isok = false
                } else {
                    this.isok = true
                    this.updataimg.fileKey = this.utypeTexe
                }
                
            }

            if (file.type.includes('audio')) {
                this.getTimes(file)
                const isLt2M = file.size / 1024 / 1024 < 500;
                if (!isLt2M) {
                    this.$message.error('上传音频大小不能超过 500MB!');
                    this.isok = false
                } else {
                    this.isok = true
                    this.updataimg.fileKey = this.utypeTexe
                }
                
            }
        },