type=“line”
:percentage=“videoUploadPercent”
style=“margin-top: 30px”
- 在我的实际业务中,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;
-
如果video的src发生变化,预览是不会变化的
-
所以给此标签加了唯一的key值,每次上传成功key都会变化,让其强制刷新
- 这里也请大家按需取用,不需要删掉就是,不要原封不动的搬