<script setup lang="ts">
|
import { ref } from 'vue'
|
import type { UploadProps, UploadUserFile } from 'element-plus'
|
const fileList = ref<UploadUserFile[]>([])
|
const upload = ref()
|
|
const emits = defineEmits(['getUploadPicture'])
|
|
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
|
console.log(uploadFile, uploadFiles)
|
}
|
|
const handlePreview: UploadProps['onPreview'] = (file) => {
|
console.log(file)
|
}
|
const handleChange = (uploadFile, uploadFiles) => {
|
emits('getUploadPicture', uploadFile.name,uploadFile)
|
upload.value.clearFiles()
|
}
|
|
</script>
|
|
<template>
|
<el-upload
|
v-model:file-list="fileList"
|
ref="upload"
|
class="upload-demo"
|
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
:on-preview="handlePreview"
|
:on-remove="handleRemove"
|
:on-change="handleChange"
|
list-type="picture"
|
:auto-upload="false"
|
>
|
<el-button type="primary">Click to upload</el-button>
|
<template #tip>
|
<div class="el-upload__tip">
|
DWG files with a size less than 10M
|
</div>
|
</template>
|
</el-upload>
|
</template>
|
|
<style scoped>
|
|
</style>
|
