导入组件的封装
<template><Modal :visible="visible" title="导入" @onSave="onSave" @onCancal="closeDialog"><template #default><el-upload ref="upload" class="upload-demo"action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :limit="1" :on-exceed="handleExceed":auto-upload="false" :on-change="handleChange" :before-upload="beforeUpload" drag:accept="props.accept.join(',')"><el-icon class="el-icon--upload"><upload-filled /></el-icon><div class="el-upload__text">点击或将文件拖拽到这里上传</div><template #tip><div class="el-upload__tip">仅支持{{ props.accept.join(',') }}文件</div></template></el-upload></template></Modal><el-button @click="toggle">导入</el-button>
</template>
<script setup>
import { ref } from "vue";
import { UploadFilled } from '@element-plus/icons-vue'
import { ElMessage } from "element-plus";
import Modal from '@/components/Modal/index.vue'const props = defineProps({requestFn: Function,accept: Array
})const emit = defineEmits(['onSave'])const visible = ref(false)const fileList = ref([])
const upload = ref()// 点击导入
const toggle = () => {// if(upload.value) {// upload.value.submit()// }visible.value = !visible.value
}// 限制
const handleExceed = () => {ElMessage.warning("只能上传一个文件，请先删除");
};// 上传文件
const handleChange = (file) => {if (file.status === "ready") {fileList.value = [file.raw];}
};// 上传文件之前的钩子
const beforeUpload = (file) => {console.log(file)const acceptStr = props.accept.join(',')const fi = props.accept.findIndex(o => file.name.endsWith(o));if (fi === -1) {console.log(`仅支持${acceptStr}格式的文件`)// ElMessage.warn(`仅支持${acceptStr}格式的文件`);} else {// setFileList([file]);}return false;
}// 保存
const onSave = async () => {try {if (fileList.value && fileList.value.length > 0) {const formData = new FormData();fileList.value.forEach(file => {console.log(file)formData.append('file', file)console.log(formData.get('file'))});console.log(formData.get('file'))const res = await props.requestFn(formData)console.log(res)// onClose(true);// setVisible(false);emit('onSave', '')} else {ElMessage.warn('请选择文件');}} catch (e) {console.log(e)}
}// 关闭弹窗
const closeDialog = () => {visible.value = false
}</script>使用
