Vue3 Element Plus 视频上传组件代码示例（script setup + ref + function）

<template>
  <div>
    <el-upload
      ref="upload"
      class="upload-demo"
      :action="uploadUrl"
      :before-upload="beforeUpload"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :headers="headers"
      :data="data"
      :multiple="multiple"
      :limit="limit"
      :accept="accept"
      :show-file-list="showFileList"
      :on-exceed="onExceed"
      :on-remove="onRemove"
      :disabled="disabled"
    >
      <el-button :loading="uploading">{{ buttonText }}</el-button>
      <div slot="tip" class="el-upload__tip">{{ tip }}</div>
    </el-upload>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { ElUpload, ElButton } from 'element-plus';

const uploadUrl = ref('/api/upload');
const beforeUpload = ref(() => {});
const uploadSuccess = ref((response, file, fileList) => {});
const uploadError = ref((err, file, fileList) => {});
const headers = ref({});
const data = ref({});
const multiple = ref(false);
const limit = ref(3);
const accept = ref('');
const showFileList = ref(true);
const onExceed = ref((files, fileList) => {});
const onRemove = ref((file, fileList) => {});
const disabled = ref(false);
const uploading = ref(false);
const buttonText = ref('上传');
const tip = ref('仅支持png/jpg格式，且不超过2M');

function upload() {
  this.$refs.upload.submit();
}

export default {
  components: {
    ElUpload,
    ElButton,
  },
  setup() {
    return {
      uploadUrl,
      beforeUpload,
      uploadSuccess,
      uploadError,
      headers,
      data,
      multiple,
      limit,
      accept,
      showFileList,
      onExceed,
      onRemove,
      disabled,
      uploading,
      buttonText,
      tip,
      upload,
    };
  },
};
</script>