fix: 修复学生导入上传认证失败的问题
使用自定义上传方法(http-request)替代原生action, 通过项目的request工具发送请求,自动走Vite代理并携带token
This commit is contained in:
parent
ea1524ea67
commit
da75094367
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue