Newer
Older
Nanping_sponge_GCYPG / src / views / preassess / examineManage / upload.vue
@liyingjing liyingjing on 25 Oct 2023 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. ::v-deep(.el-upload-list) {
  68. display: none;
  69. }
  70. }
  71.  
  72. </style>