<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>
用element-plus框架插入视频上传组件生成vue3格式 script setup代码要求所有函数用function定义要求所有变量为ref响应式无需任何文字说明只要源码即可

原文地址: https://www.cveoy.top/t/topic/bbFp 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录