101 lines
2.3 KiB
Vue
101 lines
2.3 KiB
Vue
<template>
|
|
<el-upload
|
|
:action="uploadUrl()"
|
|
:headers="headers"
|
|
:data="data"
|
|
:show-file-list="false"
|
|
:before-upload="handleBeforeUpload"
|
|
:on-success="handleSuccess"
|
|
:on-error="handleError"
|
|
class="simple-upload"
|
|
>
|
|
<el-button class="clickBut" color="#005c5c" :loading="isUploading">
|
|
<UploadFilled class="mr-2"/>
|
|
{{ t('auths.upload') }}
|
|
</el-button>
|
|
</el-upload>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {UploadFilled} from '@element-plus/icons-vue'
|
|
import {ElMessage} from 'element-plus'
|
|
import {useI18n} from 'vue-i18n'
|
|
|
|
const eventBus: any = inject('bus')
|
|
const {t} = useI18n()
|
|
|
|
// 组件属性
|
|
const props = defineProps({
|
|
// 额外上传数据
|
|
data: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
// 接受的文件类型
|
|
accept: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// 最大文件大小(MB)
|
|
maxSize: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
})
|
|
const headers = ref({
|
|
// Authorization: 'Bearer ' + localStorage.getItem('access_token')
|
|
Authorization: localStorage.getItem('Authorization')
|
|
})
|
|
// const action = ref('')
|
|
// 上传状态
|
|
const isUploading = ref(false)
|
|
// 上传地址
|
|
const uploadUrl = () => {
|
|
//process.env.BASE_API +
|
|
console.log(process.env.BASE_API, 'yyyyy')
|
|
let url = (localStorage.getItem("ip") || 'http://127.0.0.1:8848') + '/auth/import'
|
|
return url
|
|
}
|
|
// 上传前处理
|
|
const handleBeforeUpload = (file: File) => {
|
|
// 检查文件大小
|
|
if (props.maxSize && file.size > props.maxSize * 1024 * 1024) {
|
|
ElMessage.error(`文件大小不能超过 ${props.maxSize}MB`)
|
|
return false
|
|
}
|
|
// 标记为上传中
|
|
isUploading.value = true
|
|
return true
|
|
}
|
|
|
|
// 上传成功处理
|
|
const handleSuccess = (response: any) => {
|
|
if (response.code != 200) {
|
|
ElMessage.error(response.message)
|
|
isUploading.value = false
|
|
} else {
|
|
isUploading.value = false
|
|
ElMessage.success('授权成功')
|
|
eventBus.emit('upload', true)
|
|
}
|
|
// 可以在这里添加成功后的其他逻辑
|
|
}
|
|
|
|
// 上传失败处理
|
|
const handleError = (error: Error) => {
|
|
isUploading.value = false
|
|
ElMessage.error('文件上传失败')
|
|
console.error('上传错误:', error)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.simple-upload {
|
|
display: inline-block;
|
|
}
|
|
|
|
::v-deep .clickBut:hover {
|
|
color: rgba(0, 255, 255, 1) !important;
|
|
}
|
|
</style>
|