Vue3 Element Plus 视频上传组件代码示例 (script setup, function)

<template>
  <div>
    <el-upload
      ref='upload'
      class='upload-demo'
      :action='uploadUrl'
      :multiple='false'
      :on-success='handleSuccess'
      :before-upload='beforeUpload'>
      <el-button size='small' type='primary'>点击上传视频</el-button>
      <div slot='tip' class='el-upload__tip'>只能上传mp4格式的视频</div>
    </el-upload>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { ElUpload, ElButton } from 'element-plus';

const uploadUrl = 'your_upload_url';

const handleSuccess = (response, file, fileList) => {
  console.log(response);
};

const beforeUpload = (file) => {
  const isMp4 = file.type === 'video/mp4';
  if (!isMp4) {
    this.$message.error('只能上传mp4格式的视频');
  }
  return isMp4;
};

</script>