fix: 修复学生导入上传认证失败的问题

使用自定义上传方法(http-request)替代原生action,
通过项目的request工具发送请求,自动走Vite代理并携带token
This commit is contained in:
神码-方晓辉 2026-02-02 20:19:48 +08:00
parent ea1524ea67
commit da75094367
2 changed files with 45 additions and 45 deletions

View File

@ -23,7 +23,7 @@ export default {
* 是否显示 tagsView
*/
tagsView: true,
/**
* 显示页签图标
*/

View File

@ -30,12 +30,8 @@
<el-upload
ref="uploadRef"
:action="uploadUrl"
:headers="uploadHeaders"
:http-request="customUpload"
:before-upload="beforeUpload"
:on-success="handleSuccess"
:on-error="handleError"
:on-progress="handleProgress"
:show-file-list="true"
:limit="1"
accept=".xlsx,.xls"
@ -85,8 +81,7 @@
*/
import { Download, UploadFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { computed, ref } from 'vue'
import { getToken } from '@/utils/auth'
import { ref } from 'vue'
import request from '@/utils/request'
const emit = defineEmits(['success'])
@ -98,17 +93,6 @@ const downloadLoading = ref(false)
const uploading = ref(false)
const uploadProgress = ref(0)
// 使
const uploadUrl = computed(() => {
return import.meta.env.VITE_APP_BASE_API + '/business/student/import'
})
//
const uploadHeaders = computed(() => {
const token = getToken()
return token ? { Authorization: 'Bearer ' + token } : {}
})
//
const handleDownloadTemplate = async () => {
downloadLoading.value = true
@ -153,42 +137,58 @@ const beforeUpload = (file) => {
return false
}
importResult.value = null
uploading.value = true
uploadProgress.value = 0
return true
}
//
const handleProgress = (event) => {
uploadProgress.value = Math.round(event.percent)
}
//
const handleSuccess = (response) => {
uploading.value = false
// 使 request Vite token
const customUpload = async ({ file, onProgress, onSuccess, onError }) => {
uploading.value = true
uploadProgress.value = 0
if (response.code === 200) {
importResult.value = response.data
if (response.data.failCount === 0) {
ElMessage.success(`导入成功,共导入 ${response.data.successCount} 条数据`)
emit('success')
const formData = new FormData()
formData.append('file', file)
try {
const response = await request({
url: '/business/student/import',
method: 'post',
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: (progressEvent) => {
const percent = Math.round((progressEvent.loaded / progressEvent.total) * 100)
uploadProgress.value = percent
onProgress({ percent })
}
})
uploading.value = false
uploadProgress.value = 0
// response axios
if (response.code === 200) {
importResult.value = response.data
if (response.data.failCount === 0) {
ElMessage.success(`导入成功,共导入 ${response.data.successCount} 条数据`)
emit('success')
} else {
ElMessage.warning('部分数据导入失败,请查看失败原因')
}
onSuccess(response)
} else {
ElMessage.warning('部分数据导入失败,请查看失败原因')
ElMessage.error(response.msg || '导入失败')
onError(new Error(response.msg || '导入失败'))
}
} else {
ElMessage.error(response.msg || '导入失败')
} catch (error) {
uploading.value = false
uploadProgress.value = 0
console.error('上传失败:', error)
ElMessage.error('文件上传失败,请重试')
onError(error)
}
}
//
const handleError = (error) => {
uploading.value = false
uploadProgress.value = 0
console.error('上传失败:', error)
ElMessage.error('文件上传失败,请重试')
}
//
const handleClose = () => {
visible.value = false