<template>
    <el-upload :on-preview="previewFile" :limit="1" :on-change="changeFile" :auto-upload="false" :data="uploadForm.data">
        <template #trigger>
            <el-button size="small" type="primary">选取文件</el-button>
        </template>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">确认导入</el-button>
    </el-upload>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { uploadExcel } from '@/api/excel.js'
import { ElMessage } from 'element-plus'
const file = ref()
const uploadForm = reactive({
    data: {
        fileId: '',
        name: '',
        type: ''
    }
})
const changeFile = (uploadFile) => {
    file.value = uploadFile
}
const submitUpload = () => {
    if (uploadForm == undefined || file.value == undefined) {
        ElMessage.error('请选择文件之后再导入')
    }
    const jsonStr = JSON.stringify(uploadForm.data);
    const blob = new Blob([jsonStr], {
        type: 'application/json'
    });
    let formData = new FormData();
    // 这里很重要 file.value.raw才是真实的file文件，file.value只是一个Proxy代理对象
    formData.append("file", file.value.raw);

    uploadExcel(formData).then(res => {
        console.log(res.data)
        if (res.data.code == 0) {
            ElMessage({
                message: '导入成功',
                type: 'success',
            })
        } else {
            ElMessage.error(res.data.message)
        }
    }).catch(err => {
        console.log(err)
        ElMessage.error('导入错误')
    })
}
const previewFile = () => {

}
</script>
<style scoped></style>