Vue2 Element UI 视频上传组件示例代码

<template>
  <div>
    <el-upload
      class='upload-demo'
      action='/api/upload'
      :before-upload='beforeUpload'
      :on-success='onSuccess'
      :on-error='onError'
      :limit='1'
      :file-list='fileList'
      :auto-upload='false'
    >
      <el-button size='small' type='primary'>点击上传视频</el-button>
      <div slot='tip' class='el-upload__tip'>只能上传mp4格式的视频</div>
    </el-upload>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    beforeUpload(file) {
      const isMp4 = file.type === 'video/mp4'
      if (!isMp4) {
        this.$message.error('只能上传mp4格式的视频')
      }
      return isMp4
    },
    onSuccess(response, file) {
      this.fileList.push({
        name: file.name,
        url: response.data.url
      })
      this.$message.success('视频上传成功')
    },
    onError(error, file) {
      this.$message.error('视频上传失败')
    }
  }
}
</script>
<p>其中，<code>el-upload</code>为element框架的上传组件，通过设置<code>action</code>属性指定上传地址，<code>before-upload</code>方法进行上传前的格式校验，<code>on-success</code>和<code>on-error</code>方法分别处理上传成功和失败后的逻辑，<code>file-list</code>属性用于展示已上传的文件列表。在模板中通过<code>el-button</code>插入上传视频的按钮，<code>slot='tip'</code>用于设置上传提示信息。</p>