Vue3 使用 Element Plus 框架视频上传组件 - script setup 代码示例

<template>
  <el-upload
    ref="upload"
    :action="uploadUrl"
    :headers="uploadHeaders"
    :data="uploadData"
    :accept="uploadAccept"
    :multiple="uploadMultiple"
    :limit="uploadLimit"
    :file-list="fileList"
    :auto-upload="false"
    :show-file-list="showFileList"
    :on-change="handleChange"
    :before-upload="beforeUpload"
  >
    <el-button type="primary" size="small">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传mp4文件，且不超过500MB</div>
  </el-upload>
</template>
<script setup>
import { ref } from 'vue';
import { ElUpload, ElButton } from 'element-plus';

const uploadUrl = 'https://your-upload-url.com';
const uploadHeaders = {
  Authorization: 'Bearer your-token'
};
const uploadData = {
  field1: 'value1',
  field2: 'value2'
};
const uploadAccept = '.mp4';
const uploadMultiple = false;
const uploadLimit = 1;
const fileList = ref([]);
const showFileList = true;

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

const beforeUpload = (file) => {
  const isMp4 = file.type === 'video/mp4';
  const isLt500M = file.size / 1024 / 1024 < 500;

  if (!isMp4) {
    this.$message.error('只能上传mp4文件');
  }
  if (!isLt500M) {
    this.$message.error('文件大小不能超过500MB');
  }

  return isMp4 && isLt500M;
};
</script>
<style lang="scss" scoped>
.el-upload__tip {
  margin-top: 10px;
  font-size: 14px;
  color: #909399;
}
</style>
<p>在这个示例中，我们使用了<code>ref</code>来获取<code>el-upload</code>组件的实例，从而调用<code>upload</code>方法来实现手动上传。我们还创建了<code>uploadUrl</code>、<code>uploadHeaders</code>、<code>uploadData</code>、<code>uploadAccept</code>、<code>uploadMultiple</code>、<code>uploadLimit</code>等变量来设置上传组件的属性。我们还定义了<code>handleChange</code>和<code>beforeUpload</code>方法来处理上传前后的逻辑，这些方法可以在组件的<code>on-change</code>和<code>before-upload</code>事件中调用。最后，我们还设置了一些样式来美化组件。</p>