Newer
Older
KaiFengPC / src / views / spongePerformance / longTerm / examinemanage / upload.vue
@zhangdeliang zhangdeliang on 23 May 1 KB 初始化项目
  1. <template>
  2. <el-upload
  3. v-loading.fullscreen.lock="loading"
  4. element-loading-text="加载中..."
  5. element-loading-background="rgba(0, 0, 0, 0.6)"
  6. class="upload"
  7. accept=".xls, .xlsx"
  8. :action="props.action"
  9. :data="props.data"
  10. :headers="uploadHeader"
  11. :before-upload="beforeUpload"
  12. :on-success="onSuccess"
  13. :on-error="onError"
  14. :disabled="props.disabled"
  15. >
  16. <slot></slot>
  17. </el-upload>
  18. </template>
  19.  
  20. <script setup>
  21. import { getToken } from '@/utils/auth';
  22.  
  23. const props = defineProps({
  24. action: {
  25. type: String,
  26. default: '/prod-api/system/upload',
  27. },
  28. data: {
  29. type: Object,
  30. default: () => {},
  31. },
  32. disabled: {
  33. type: Boolean,
  34. default: false,
  35. },
  36. });
  37.  
  38. const emit = defineEmits(['success']);
  39.  
  40. const uploadHeader = ref({
  41. Authorization: 'Bearer ' + getToken(),
  42. });
  43.  
  44. const loading = ref(false);
  45.  
  46. const beforeUpload = rawFile => {
  47. console.log(rawFile);
  48. loading.value = true;
  49. return true;
  50. };
  51.  
  52. const onSuccess = (response, uploadFile, uploadFiles) => {
  53. loading.value = false;
  54. const data = response.data;
  55. emit('success', data);
  56. };
  57.  
  58. const onError = (error, uploadFile, uploadFiles) => {
  59. console.log(error, uploadFile, uploadFiles);
  60. loading.value = false;
  61. };
  62. </script>
  63.  
  64. <style lang="scss" scoped>
  65. .upload {
  66. display: inline-block;
  67. :deep(.el-upload-list) {
  68. display: none;
  69. }
  70. }
  71. </style>