92 lines
2.6 KiB
Vue
92 lines
2.6 KiB
Vue
|
<template>
|
|||
|
|
<el-dialog v-model="visible" title="批量导入气象数据" width="450px" :close-on-click-modal="false">
|
|||
|
|
<el-upload
|
|||
|
|
ref="uploadRef"
|
|||
|
|
class="upload-demo"
|
|||
|
|
drag
|
|||
|
|
action="#"
|
|||
|
|
:auto-upload="false"
|
|||
|
|
:on-change="handleChange"
|
|||
|
|
:http-request="uploadFileRequest"
|
|||
|
|
:limit="1"
|
|||
|
|
:on-exceed="handleExceed"
|
|||
|
|
accept=".xlsx, .xls"
|
|||
|
|
>
|
|||
|
|
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
|||
|
|
<div class="el-upload__text">将文件拖到此处，或 <em>点击选择</em></div>
|
|||
|
|
<template #tip>
|
|||
|
|
<div class="el-upload__tip" style="text-align: center;">
|
|||
|
|
只能上传 Excel 文件，且不超过 10MB
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-upload>
|
|||
|
|
|
|||
|
|
<template #footer>
|
|||
|
|
<span class="dialog-footer">
|
|||
|
|
<el-button @click="visible = false">取消</el-button>
|
|||
|
|
<el-button type="primary" :loading="loading" @click="dataFormSubmitHandle">确定</el-button>
|
|||
|
|
</span>
|
|||
|
|
</template>
|
|||
|
|
</el-dialog>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import { ref } from 'vue';
|
|||
|
|
import { ElMessage } from 'element-plus';
|
|||
|
|
import baseService from "@/service/baseService"; // 确保路径对应你的项目
|
|||
|
|
|
|||
|
|
const visible = ref(false);
|
|||
|
|
const loading = ref(false);
|
|||
|
|
const uploadRef = ref();
|
|||
|
|
const fileRaw = ref<File | null>(null);
|
|||
|
|
const emit = defineEmits(['refreshDataList']);
|
|||
|
|
|
|||
|
|
// 初始化
|
|||
|
|
const init = () => {
|
|||
|
|
visible.value = true;
|
|||
|
|
fileRaw.value = null;
|
|||
|
|
if(uploadRef.value) uploadRef.value.clearFiles();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 监听文件选择状态
|
|||
|
|
const handleChange = (file: any) => {
|
|||
|
|
fileRaw.value = file.raw;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 限制只能选一个文件，选新文件替换旧文件
|
|||
|
|
const handleExceed = (files: any) => {
|
|||
|
|
uploadRef.value!.clearFiles();
|
|||
|
|
const file = files[0];
|
|||
|
|
uploadRef.value!.handleStart(file);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const dataFormSubmitHandle = () => {
|
|||
|
|
if (!fileRaw.value) {
|
|||
|
|
return ElMessage.warning("请先选择文件");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
loading.value = true;
|
|||
|
|
const formData = new FormData();
|
|||
|
|
// 这里的 "file" 必须和后端 Controller 的 @RequestParam("file") 名字一致
|
|||
|
|
formData.append("file", fileRaw.value);
|
|||
|
|
|
|||
|
|
// 注意：很多封装好的 baseService 在 post 时会自动序列化 data
|
|||
|
|
// 尝试直接发送 formData，不要加额外的 {} 包装
|
|||
|
|
baseService.upload("/dailyweather/weatherdailydata/import", formData)
|
|||
|
|
.then(() => {
|
|||
|
|
ElMessage.success("导入成功");
|
|||
|
|
visible.value = false;
|
|||
|
|
emit("refreshDataList");
|
|||
|
|
})
|
|||
|
|
.catch((err) => {
|
|||
|
|
// 捕获具体报错
|
|||
|
|
console.error("上传细节错误:", err);
|
|||
|
|
})
|
|||
|
|
.finally(() => {
|
|||
|
|
loading.value = false;
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
defineExpose({ init });
|
|||
|
|
</script>
|