html
<template>
<el-upload :class=BASE_URL drag :action="API_CONFIG.uploadFile" type="file" multiple :limit="1"
accept=".xlsx,.xls,.yaml,.yml,.execl,.json" v-model:file-list="file" :http-request="handleUploadFile">
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload_font">
<em>点击上传文件</em>
</div>
</el-upload>
</template>
<script setup lang="js">
import { ElNotification } from 'element-plus'
import { API_CONFIG } from '../config/index.js'
import { UploadFilled } from '@element-plus/icons-vue'
import { reactive } from 'vue'
import {BASE_URL} from '../config/index'
import axios from 'axios'
const form = reactive({
name: '',
file: '',
})
const handleUploadFile = (v) => {
form.file = v.file
form.name = v.name
let formData = new FormData()
formData.append("name", form.name)
formData.append("file", form.file)
axios.post(API_CONFIG.uploadFile, formData, {
headers: { 'Content-Type': 'multipart/form-data' }
}).then((response) => {
if (response.data.status == 200) {
ElNotification({
title: 'Success',
message: response.data.message,
type: 'success',
})
} else {
ElNotification({
title: 'Error',
message: '上传失败!',
type: 'error',
})
}
})
}
</script>