ant-design-vue中的视频上传组件upload自定义本地预览视频、校验视频类型、校验上传视频文件大小等功能
新项目中需要用到新闻视频上传功能,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)])
},
上传触发校验效果:
上传成功鼠标移入视频上方效果:
预览弹层:
关键注意点,当弹层关闭时要记得触发停止播放视频:
到这里,自定义一个可以本地预览视频的组件就完成了。 (还应该给上传成功后的视频缩略图展示视频某段截屏搞一搞,不然一个文件图片展示缩略视频不太美观,后续再优化吧)
温馨提示:
我,作为一个神奇的喵系女孩,虽然反射弧稍微迟缓的长那么一点点,但,我必定是一只不容置疑的程序媛大佬!
如有问题请私信呦~看到以后我会第一时间回复哒~
安静的等待本媛的下一篇实习总结吧!
HO463: 有解决这个问题吗 大佬
空山新雨后~: 你好,为什么我上传了两条数据,每条数据中各上传了一个视频,预览其中一个视频关闭之后再去预览第二条视频时打开的却还是第一条视频呢
不听话的坏孩子: ui要图片视频放上传按钮上方,但是视频预览的时候不进预览方法 图片就可以 element 里面 视频的target url 也没有挂上 但是上传成功了的 <a-upload v-model:file-list="fileList" :progress="progress" list-type="picture-card" :beforeUpload="beforeUpload" @preview="handlePreview" :customRequest="customRequest" :remove="handleFileRemove" > </a-upload> </div> <div> <a-upload v-if="ownName ? false : true" v-model:file-list="fileList" accept=".jpg,.png,.bmp,.gif,.jpeg,.mp4,.blf,.AVI,.WMV" :max-count="9" :multiple="true" :show-upload-list="false" :beforeUpload="beforeUpload" :customRequest="customRequest" @preview="handlePreview" :remove="handleFileRemove" > <img v-if="fileList?.length < 9"
可可里601: 你好上传视频的缩略图怎么做啊
有梦想就不累: 可以参考一下我的评论,亲测可行。