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

<script setup>
import { ref } from 'vue';
import { ElUpload } from 'element-plus';

function handleSuccess(response, file, fileList) {
  console.log(response, file, fileList);
}

function handleError(err, file, fileList) {
  console.log(err, file, fileList);
}

const videoList = ref([]);

const headers = {
  Authorization: 'Bearer token'
};

const uploadProps = {
  action: 'https://example.com/api/upload',
  headers,
  multiple: true,
  limit: 5,
  onSuccess: handleSuccess,
  onError: handleError,
  fileList: videoList,
  listType: 'picture-card',
  autoUpload: false,
  drag: true,
  showFileList: true,
  beforeUpload: (file) => {
    const isVideo = file.type.includes('video');
    const isLt100M = file.size / 1024 / 1024 < 100;

    if (!isVideo) {
      this.$message.error('上传文件只能是视频格式!');
    }
    if (!isLt100M) {
      this.$message.error('上传文件大小不能超过 100MB!');
    }
    return isVideo && isLt100M;
  }
};

</script>
<template>
  <el-upload {...uploadProps}>
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将视频拖到此处，或<em>点击上传</em></div>
    <div class="el-upload__tip" slot="tip">只能上传视频格式，且不超过100MB</div>
  </el-upload>
</template>