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

<template>
  <div>
    <el-upload
      ref='upload'
      :auto-upload='false'
      :file-list='fileList'
      :on-change='handleChange'
      :on-preview='handlePreview'
      :on-remove='handleRemove'
    >
      <el-button
        slot='trigger'
        type='primary'
        :loading='uploading'
        :disabled='fileList.length >= limit'
      >
        <i class='el-icon-upload'></i> {{ buttonText }}
      </el-button>
      <div slot='tip'>{{ tip }}</div>
    </el-upload>
  </div>
</template>

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

  const fileList = ref([])
  const uploading = ref(false)
  const limit = ref(5)

  const buttonText = ref('选择文件')
  const tip = ref('只能上传jpg/png文件，且不超过2MB')

  function handleChange(file) {
    if (file.length > limit) {
      this.$message.warning(`一次最多上传 ${limit} 个文件`)
    } else {
      fileList.value = [...fileList.value, ...file]
    }
  }

  function handlePreview(file) {
    window.open(file.url, '_blank')
  }

  function handleRemove(file) {
    const index = fileList.value.indexOf(file)
    fileList.value.splice(index, 1)
  }

  function handleUpload() {
    uploading.value = true
    setTimeout(() => {
      fileList.value = []
      uploading.value = false
      this.$message.success('上传成功')
    }, 2000)
  }
</script>

<style>
  .el-upload__tip {
    margin-top: 10px;
  }
</style>