- <template>
- <el-upload
- v-loading.fullscreen.lock="loading"
- element-loading-text="加载中..."
- element-loading-background="rgba(0, 0, 0, 0.6)"
- class="upload"
- accept=".xls, .xlsx"
- :action="props.action"
- :data="props.data"
- :headers="uploadHeader"
- :before-upload="beforeUpload"
- :on-success="onSuccess"
- :on-error="onError"
- :disabled="props.disabled"
- >
- <slot></slot>
- </el-upload>
- </template>
-
- <script setup>
- import { getToken } from '@/utils/auth';
-
- const props = defineProps({
- action: {
- type: String,
- default: '/prod-api/system/upload',
- },
- data: {
- type: Object,
- default: () => {},
- },
- disabled: {
- type: Boolean,
- default: false,
- },
- });
-
- const emit = defineEmits(['success']);
-
- const uploadHeader = ref({
- Authorization: 'Bearer ' + getToken(),
- });
-
- const loading = ref(false);
-
- const beforeUpload = rawFile => {
- console.log(rawFile);
- loading.value = true;
- return true;
- };
-
- const onSuccess = (response, uploadFile, uploadFiles) => {
- loading.value = false;
- const data = response.data;
- emit('success', data);
- };
-
- const onError = (error, uploadFile, uploadFiles) => {
- console.log(error, uploadFile, uploadFiles);
- loading.value = false;
- };
- </script>
-
- <style lang="scss" scoped>
- .upload {
- display: inline-block;
- :deep(.el-upload-list) {
- display: none;
- }
- }
- </style>