fs-admin/src/components/form/ElFileUpload.vue

<script lang="ts" setup>
import config from '@/config/defaultSetting'
import { useUpload } from '@/hooks/useUpload'
import type { BasicFormItem } from '@/types/form'

interface Props {
  modelValue: any
  item?: BasicFormItem
  fileSize?: number | string
  action?: string
  oss?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  action: config.uploadApi,
  fileSize: 100,
  oss: config.oss
})
const emits = defineEmits(['update:modelValue'])

const { modelValue, headers, action, uploadAttrs, beforeUpload, handleRemove } = useUpload(props, emits, 'file')
</script>

<template>
  <el-upload
    v-model:file-list="modelValue"
    :action="action"
    :headers="headers"
    :before-upload="beforeUpload"
    :on-remove="handleRemove"
    v-bind="{ ...uploadAttrs, ...$attrs }"
  >
    <template #[slot.name]="slotProps" v-for="slot in item?.slots" :key="slot.alias">
      <slot :name="slot.alias" v-bind="slotProps">
        <el-button type="primary">上传</el-button>
      </slot>
    </template>
  </el-upload>
</template>

<style lang="scss" scoped></style>