新项目中需要用到新闻视频上传功能,UI组件库采用的是ant-design-vue,所以就用里面的upload组件改造自定义了一个视频上传组件。上代码:
关键定义点在于
1.校验视频文件大小:
//校验 文件大小
checkSize(file, size) {
let that = this
return new Promise(function (resolve, reject) {
if (file.size / 1024 > size) {
that.$message.warning('文件大小超出限制,请重新上传')
reject()
} else {
console.log('大小正确')
resolve()
}
})
},
2.校验上传文件类型:
// 文件类型
checkType(file, typeList) {
let that = this
return new Promise(function (resolve, reject) {
if (!typeList.includes(file.type)) {
that.$message.warning('视频文件类型错误,请重新上传')
reject()
} else {
console.log('类型正确')
resolve()
}
})
},
3.在上传文件之前的钩子函数beforeUpload里触发校验
beforeUpload: function (file) {
console.log(file, '文件信息')
return false, Promise.all([this.checkType(file, ['video/mp4', 'video/ogg']), this.checkSize(file, 1024 * 10)])
},
上传触发校验效果:
上传成功鼠标移入视频上方效果:
预览弹层:
关键注意点,当弹层关闭时要记得触发停止播放视频:
到这里,自定义一个可以本地预览视频的组件就完成了。 (还应该给上传成功后的视频缩略图展示视频某段截屏搞一搞,不然一个文件图片展示缩略视频不太美观,后续再优化吧)
温馨提示:
我,作为一个神奇的喵系女孩,虽然反射弧稍微迟缓的长那么一点点,但,我必定是一只不容置疑的程序媛大佬!
如有问题请私信呦~看到以后我会第一时间回复哒~
安静的等待本媛的下一篇实习总结吧!