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)])
    },

上传触发校验效果：

上传成功鼠标移入视频上方效果： 

 

预览弹层：

关键注意点,当弹层关闭时要记得触发停止播放视频：

到这里，自定义一个可以本地预览视频的组件就完成了。 （还应该给上传成功后的视频缩略图展示视频某段截屏搞一搞，不然一个文件图片展示缩略视频不太美观，后续再优化吧）

温馨提示：

我，作为一个神奇的喵系女孩，虽然反射弧稍微迟缓的长那么一点点，但，我必定是一只不容置疑的程序媛大佬！

如有问题请私信呦~看到以后我会第一时间回复哒~

安静的等待本媛的下一篇实习总结吧！