55 lines
1.6 KiB
Vue
55 lines
1.6 KiB
Vue
|
<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>
|