用element-plus框架插入视频上传组件生成vue3格式 script setup代码要求所有函数用function定义要求所有变量为ref响应式无需任何文字说明只要源码即可
<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>
原文地址: https://www.cveoy.top/t/topic/bbFp 著作权归作者所有。请勿转载和采集!