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

<template>
  <el-upload
    class='upload-demo'
    action='/upload'
    :on-preview='handlePreview'
    :on-remove='handleRemove'
    :before-upload='beforeUpload'
    :file-list='fileList'
    :auto-upload='false'
    :list-type='listType'
    :multiple='multiple'
    :limit='limit'
    :show-file-list='showFileList'
    :drag='drag'
    :accept='accept'
  >
    <template v-if='listType === 'picture-card''>
      <i class='el-icon-plus'></i>
    </template>
    <template v-else>
      <el-button size='small' type='primary'>点击上传</el-button>
    </template>
  </el-upload>
</template>

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

const fileList = ref([])
const listType = ref('text')
const multiple = ref(false)
const limit = ref(1)
const showFileList = ref(true)
const drag = ref(false)
const accept = ref('')

const handlePreview = (file) => {
  console.log('handlePreview', file)
}

const handleRemove = (file, fileList) => {
  console.log('handleRemove', file, fileList)
}

const beforeUpload = (file) => {
  console.log('beforeUpload', file)
}

</script>

<style scoped>
.upload-demo {
  display: inline-block;
  margin-bottom: 20px;
}
</style>