<template>
<el-upload
v-model:file-list="upload.fileList"
:action="upload.action"
list-type="picture-card"
:before-upload="upload.before"
:on-success="upload.success"
limit
:on-preview="upload.proview"
:data-fileListCount="upload.fileList.length"
:name="upload.name"
:on-remove="upload.remove"
>
<el-icon>
<Plus />
</el-icon>
</el-upload>
<div class="teacherDialog">
<el-dialog
v-model="upload.dialogVisible"
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<img w-full :src="upload.dialogImageUrl" alt="" style="width: 100%; height: 100%" />
</el-dialog>
</div>
</template>
<script setup>
import { ref, reactive, watch } from 'vue';
import { Plus } from '@element-plus/icons-vue';
const props = defineProps({
imageList: String,
domain: String,
});
const { domain } = JSON.parse(sessionStorage.getItem('teacherUserInfo')) || {
domain: props.domain,
};
watch(
() => props.imageList,
(imageList) => {
upload.fileList = imageList
? imageList.split(`,`).map((item) => {
return {
url: domain + item,
};
})
: [];
}
);
const emit = defineEmits(['getImageUrl']);
const upload = reactive({
name: 'file',
action: '',
fileList: props.imageList
? props.imageList.split(`,`).map((item) => {
return {
url: item,
};
})
: [],
dialogImageUrl: '',
dialogVisible: false,
before: (file) => {
const type = ['image/png', 'image/jpeg', 'image/gif'];
if (!type.includes(file.type)) {
ElMessage.error('不支持该类型文件');
return false;
}
},
proview: ({ url }) => {
console.log(url);
upload.dialogImageUrl = url;
upload.dialogVisible = true;
},
success: (res, uploadFile, uploadFiles) => {
console.log(uploadFiles);
console.log(
upload.fileList
.map((item) => {
return {
url: item.response ? item.response.data.url : item.url.split(domain)[1],
};
})
.map((item) => item.url)
.join()
);
let imageList = upload.fileList
.map((item) => {
return {
url: item.response ? item.response.data.url : item.url.split(domain)[1],
};
})
.map((item) => item.url)
.join();
emit('getImageUrl', imageList);
// emit(
// 'getImageUrl',
// upload.fileList.map((item) => {
// return {
// url: item.response.data.url,
// };
// })
// );
ElMessage({ type: res.code === 1 ? `success` : 'warning', message: res.msg });
},
remove: (file, files) => {
console.log(files);
let imageList = files
.map((item) => {
return {
url: item.response ? item.response.data.url : item.url.split(domain)[1],
};
})
.map((item) => item.url)
.join();
emit('getImageUrl', imageList);
},
});
</script>
<style scope lang="scss">
// [data-fileListCount='1'] {
// .el-upload--picture-card {
// display: none !important;
// }
// }
</style>
使用组件!