fix: 修复学生导入上传认证失败的问题
使用自定义上传方法(http-request)替代原生action, 通过项目的request工具发送请求,自动走Vite代理并携带token
This commit is contained in:
parent
ea1524ea67
commit
da75094367
|
|
@ -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,21 +137,36 @@ 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
|
||||||
}
|
uploadProgress.value = 0
|
||||||
|
|
||||||
|
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 })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
// 上传成功
|
|
||||||
const handleSuccess = (response) => {
|
|
||||||
uploading.value = false
|
uploading.value = false
|
||||||
uploadProgress.value = 0
|
uploadProgress.value = 0
|
||||||
|
|
||||||
|
// response 是 axios 解析后的数据
|
||||||
if (response.code === 200) {
|
if (response.code === 200) {
|
||||||
importResult.value = response.data
|
importResult.value = response.data
|
||||||
if (response.data.failCount === 0) {
|
if (response.data.failCount === 0) {
|
||||||
|
|
@ -176,17 +175,18 @@ const handleSuccess = (response) => {
|
||||||
} else {
|
} else {
|
||||||
ElMessage.warning('部分数据导入失败,请查看失败原因')
|
ElMessage.warning('部分数据导入失败,请查看失败原因')
|
||||||
}
|
}
|
||||||
|
onSuccess(response)
|
||||||
} else {
|
} else {
|
||||||
ElMessage.error(response.msg || '导入失败')
|
ElMessage.error(response.msg || '导入失败')
|
||||||
|
onError(new Error(response.msg || '导入失败'))
|
||||||
}
|
}
|
||||||
}
|
} catch (error) {
|
||||||
|
|
||||||
// 上传失败
|
|
||||||
const handleError = (error) => {
|
|
||||||
uploading.value = false
|
uploading.value = false
|
||||||
uploadProgress.value = 0
|
uploadProgress.value = 0
|
||||||
console.error('上传失败:', error)
|
console.error('上传失败:', error)
|
||||||
ElMessage.error('文件上传失败,请重试')
|
ElMessage.error('文件上传失败,请重试')
|
||||||
|
onError(error)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 关闭弹窗
|
// 关闭弹窗
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue