element-ui上传视频

最新推荐文章于 2024-03-27 21:29:06 发布

qq_49077729

最新推荐文章于 2024-03-27 21:29:06 发布

阅读量840

点赞数 2

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/qq_49077729/article/details/134007225

版权

 <div>
                    <el-upload class="avatar-uploader" :action="uploadUrl + '/upload/create'" :data="{ file_type: 'video' }"
                        v-bind:on-progress="uploadVideoProcess" v-bind:on-success="handleVideoSuccess"
                        v-bind:before-upload="beforeUploadVideo" v-bind:show-file-list="false" :headers="{
                            Authorization: 'Bearer ' + $store.state.user.token,
                        }">
                        <video v-if="videoForm.showVideoPath != '' && !videoFlag" v-bind:src="videoForm.showVideoPath"
                            class="avatar video-avatar" controls="controls">
                            您的浏览器不支持视频播放
                        </video>
                        <i v-else-if="videoForm.showVideoPath == '' && !videoFlag"
                            class="el-icon-plus avatar-uploader-icon"></i>
                        <el-progress v-if="videoFlag == true" type="circle" v-bind:percentage="videoUploadPercent"
                            style="margin-top: 7px"></el-progress>
                    </el-upload>
                </div>

 //进度条
        uploadVideoProcess(event, file, fileList) {
            //注意在data中添加对应的变量名
            this.videoFlag = true;
            this.videoUploadPercent = file.percentage.toFixed(0) * 1;
        },

  //上传前回调
        beforeUploadVideo(file) {
            var fileSize = file.size / 1024 / 1024 < 50; //控制大小  修改50的值即可
            if (
                [
                    "video/mp4",
                    "video/ogg",
                    "video/flv",
                    "video/avi",
                    "video/wmv",
                    "video/rmvb",
                    "video/mov",
                ].indexOf(file.type) == -1 //控制格式
            ) {
                this.$message.error("请上传正确的视频格式");
                return false;
            }
            if (!fileSize) {
                this.$message.error("视频大小不能超过50MB");
                return false;
            }
            this.isShowUploadVideo = false;
        },

 //上传成功回调
        handleVideoSuccess(res, file) {
            let decrypt = new JSEncrypt();
            decrypt.setPrivateKey(config.cert.privateKey);
            var decryptMsg = decrypt.decryptLong(res, "utf-8");
            res = JSON.parse(decryptMsg);
            this.isShowUploadVideo = true;
            this.videoFlag = false;
            this.videoUploadPercent = 0;
            console.log("成功", res);
            //后台上传数据
            if (res.code == 200) {
                this.videoForm.showVideoPath = res.data[0].full_path; //上传成功后端返回视频地址 回显
                this.form.media_urls[0] = res.data[0].full_path;
            } else {
                this.$message.error("上传失败！");
            }
        },

   videoFlag: false,
            //是否显示进度条
            videoUploadPercent: "",
            //进度条的进度，
            isShowUploadVideo: false,
            //显示上传按钮
            videoForm: {
                showVideoPath: "", //回显的变量
            },