element ui视频上传（已上线，拿去即用）

• 考虑到有些小伙伴不一定需要进度条，所以顺便说下怎么把它干掉，代码如下：

• 对应的变量和方案也干掉就是了

:on-progress=“uploadVideoProcess”

<el-progress

v-if=“videoFlag == true”

type=“line”

:percentage=“videoUploadPercent”

style=“margin-top: 30px”

2. script 部分

---

• 在我的实际业务中，this.rightData是父级组件传过来的值，大家用的时候记得去掉，替换成自己的就成

data() {

return {

imageUrl: this.rightData.imageUrl,

// 视频上传

uploadImgUrl: ${process.env.VUE_APP_BASE_API}/common-server/aliFile/upLoadVideo,

uploadImgData: { busiName: 32 },

// 应付多个组件的情况 记录当前组件的key值

componentKey: null,

menuKey: 1, // 用来强制刷新

videoFlag: false, // 进度条相关的

videoUploadPercent: 0, // 进度条相关的

};

},

methods: {

// 上传成功的函数

handleAvatarSuccess(res, file) {

// 进度条恢复到初始状态

this.videoFlag = false;

this.videoUploadPercent = 0;

++this.menuKey;

// console.log(res)

this.imageUrl = res.data.url;

// 这里是向父级传值，不需要就去掉

this.$emit(“childRightFn”, {

…this.rightData,

…{ imageUrl: this.imageUrl },

…{ props: { src: this.imageUrl } },

});

},

beforeAvatarUpload(file) {

// file.type === “image/jpg” ||

// file.type === “image/png”;

const isMp4 = file.type === “video/mp4”;

// 限制文件最大不能超过 300M

const isLt2M = file.size / 1024 / 1024 < 300;

if (!isMp4) {

this.$message.error(“视频只能是mp4格式!”);

}

if (!isLt2M) {

this.$message.error(“上传头像图片大小不能超过 300MB!”);

}

return isMp4 && isLt2M;

},

//进度条

uploadVideoProcess(event, file, fileList) {

this.videoFlag = true;

this.videoUploadPercent = parseInt(file.percentage);

},

}

• 有个东西重点说一下：menuKey

++this.menuKey;

1. 如果video的src发生变化，预览是不会变化的

2. 所以给此标签加了唯一的key值，每次上传成功key都会变化，让其强制刷新

3. scss 部分

---

• 这里也请大家按需取用，不需要删掉就是，不要原封不动的搬