# Upload

文件上传组件

## 代码演示

<CodePreview src="/doc-comp/upload" :height="600">
<details>
<summary>展开查看</summary>

```vue
<template>
  <PageWrapper title="上传组件示例">
    <a-alert message="基础示例" />
    <BasicUpload
      :maxSize="20"
      :maxNumber="10"
      :api="uploadApi"
      class="my-5"
      :accept="['image/*']"
      :downloadBaseUrl="uploadUrl"
      @change="handleChange"
    />

    <a-alert message="嵌入表单,加入表单校验" />

    <BasicForm class="my-5" @register="register" />
  </PageWrapper>
</template>
<script lang="ts" setup>
  import {
    BasicForm,
    BasicUpload,
    FormSchema,
    PageWrapper,
    useForm,
    useMessage,
  } from '@eciol/ant-ui';
  import { uploadApi } from '@eciol/api';
  import { useGlobSetting } from '@eciol/shared';

  const { uploadUrl } = useGlobSetting();

  const schemas: FormSchema[] = [
    {
      field: 'field1',
      component: 'Upload',
      label: '字段1',
      colProps: {
        span: 8,
      },
      rules: [{ required: true, message: '请选择上传文件' }],
      componentProps: {
        api: uploadApi,
        downloadBaseUrl: uploadUrl,
      },
    },
  ];
  const { createMessage } = useMessage();
  const [register] = useForm({
    labelWidth: 120,
    schemas,
    actionColOptions: {
      span: 16,
    },
  });
  const handleChange = (list: string[]) => {
    createMessage.info(`已上传文件${JSON.stringify(list)}`);
  };
</script>

```
</details>
</CodePreview>

## Usage

```vue
<template>
  <BasicUpload :maxSize="20" :maxNumber="10" @change="handleChange" :api="uploadApi" />
</template>
<script lang="ts" setup>
  import { BasicUpload, useMessage } from '@eciol/ant-ui';
  import { uploadApi } from '@eciol/api';

  const { createMessage } = useMessage();
  const handleChange = (list: string[]) => {
    createMessage.info(`已上传文件${JSON.stringify(list)}`);
  };
</script>
```

## Config

`.env.development` 和 `.env.production` 配置开发和生产的文件上传地址

```bash
# .env.development

# 如果没有跨域问题，则直接使用真实上传地址
VITE_GLOB_UPLOAD_URL=/upload-api

# .env.production
VITE_GLOB_UPLOAD_URL=/upload-api

```

## Props

| 属性              | 类型       | 默认值   | 可选值 | 说明                                     |
| ----------------- | ---------- | -------- | ------ | ---------------------------------------- |
| value             | `string[]` | -        | -      | 已上传的文件列表，支持v-model           |
| showPreviewNumber | `boolean`  | true     | -      | 是否显示预览数量                         |
| emptyHidePreview  | `boolean`  | false    | -      | 没有上传文件时是否隐藏预览               |
| helpText          | `string`   | -        | -      | 帮助文本                                 |
| maxSize           | `number`   | 2        | -      | 单个文件最大体积，单位 M                 |
| maxNumber         | `number`   | Infinity | -      | 最大上传数量，Infinity 则不限制          |
| accept            | `string[]` | -        | -      | 限制上传格式，可使用文件后缀名(点号可选)或MIME字符串。例如 `['.doc,','docx','application/msword','image/*']` |
| multiple          | `boolean`  | -        | -      | 开启多文件上传                           |
| uploadParams      | `any`      | -        | -      | 上传携带的参数                           |
| api               | `Fn`       | -        | -      | 上传接口，为上面配置的接口               |
| fileListApi               | `Fn`       | -        | -      | 获取文件列表接口，fileField绑定id时需要提供              |
| fileField               | `string`       | url        | `url` `id` `full`      | 文件双向绑定的字段，可只绑定url，id，或绑定全部文件数据               |
| afterFetch               | `Fn`       | null        | -      | 文件上传之后的回调函数，可用来修改返回的结果               |
| downloadBaseUrl               | `string`       | -        | -      | 下载文件的基础地址               |
| disabled               | `boolean`       |  false        | -      | 是否禁用上传组件               |
| showDownloadButton               | `boolean`       |  true        | -      | 是否显示下载按钮               |

## Events

| 事件   | 回调参数           | 返回值 | 说明                     | 版本 |
| ------ | ------------------ | ------ | ------------------------ | - |
| change | `(fileList)=>void` |        | 文件列表内容改变触发事件 | |
| delete | `(record)=>void`   |        | 在上传列表中删除文件的事件                 | |
| preview-delete | `(url:string)=>void`   |        | 在预览列表中删除文件的事件                 | 2.5.3 |