Vue3 Element Plus 视频上传组件 Script Setup 代码示例

<template>
  <div>
    <el-upload
      action=""
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :file-list="fileList"
      :auto-upload="false"
      :limit="1"
      list-type="picture-card"
    >
      <i class="el-icon-plus"></i>
      <div class="el-upload__text">上传视频</div>
    </el-upload>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { ElUpload } from 'element-plus';

const fileList = ref([]);
const handleSuccess = function (response, file, fileList) {
  console.log(response, file, fileList);
};
const beforeUpload = function (file) {
  const isVideo = file.type.includes('video');
  const isLt50M = file.size / 1024 / 1024 < 50;
  if (!isVideo) {
    this.$message.error('上传文件只能是视频格式!');
  }
  if (!isLt50M) {
    this.$message.error('上传文件大小不能超过 50MB!');
  }
  return isVideo && isLt50M;
};
</script>