<template>
|
<el-upload
|
v-model:file-list="fileList"
|
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
list-type="picture-card"
|
:on-preview="handlePictureCardPreview"
|
:on-remove="handleRemove"
|
:on-success="successFile"
|
:on-error="errorFile"
|
>
|
<el-icon><Plus /></el-icon>
|
</el-upload>
|
|
<el-dialog v-model="dialogVisible">
|
<img w-full :src="dialogImageUrl" alt="Preview Image" />
|
</el-dialog>
|
</template>
|
<script lang="ts">
|
import { ref,defineComponent } from 'vue'
|
import { Plus } from '@element-plus/icons-vue'
|
import type { UploadProps, UploadUserFile } from 'element-plus'
|
|
export default defineComponent({
|
props: {
|
// svg 图标组件名字
|
fileList: {
|
type: Array,
|
},
|
},
|
components: {
|
Plus
|
},
|
setup() {
|
|
const dialogImageUrl = ref('')
|
const dialogVisible = ref(false)
|
|
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
|
console.log(uploadFile, uploadFiles)
|
}
|
|
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
|
dialogImageUrl.value = uploadFile.url!
|
dialogVisible.value = true
|
}
|
|
const successFile = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
|
console.log(response, uploadFile,uploadFiles)
|
}
|
const errorFile = (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
|
console.log(error, uploadFile,uploadFiles)
|
}
|
|
|
return {
|
dialogImageUrl,
|
dialogVisible,
|
handleRemove,
|
handlePictureCardPreview,
|
successFile,
|
errorFile
|
};
|
},
|
});
|
</script>
|
