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
*/ */
tagsView: true, tagsView: true,
/** /**
* 显示页签图标 * 显示页签图标
*/ */

View File

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