# @corgicoding-el/upload

为 `@corgicoding/web-quick-start` 工程模板设定的上传组件

## 绑定依赖

1. `@corgicoding/web-types`
   - NormalizedError: 统一错误返回
   - NormalizedResponse: 统一接口返回
2. `@corgicoding/axios-hook`
   - useService: 获取当前 axios 实例

## 如何使用

安装工程到本地，并按需使用或全局使用

### 前置依赖

- element-plus
  - @element-plus/icons-vue
- axios
- vue-i18n
- vue (3.x)

如果没有以上依赖，工程执行以下命令进行安装

```shell
pnpm install element-plus vue vue-i18n @element-plus/icons-vue axios -S
```

### 安装

使用 `pnpm` 下载

```shell
pnpm install @corgicoding-el/upload -S
```

## 使用

假设有个上传接口 `/test/upload`, 返回的内容为 `message` 和 `data` 为上传成功的 url

```vue
<script setup>
import { UploadImage, UploadFiles } from '@corgicoding-el/upload';
import '@corgicoding-el/upload/style.css';

const imageUrl =
  ref <
  string >
  '/images/20240610-test-image.png,/images/20240610-test-image-22.png';
</script>

<template>
  <UploadImage v-model="imageUrl" url="/test/upload" isString></UploadImage>
</template>
```

### props入参

```ts
// uploadFiles
export interface UploadFilesProp {
  url: string; // 上传地址
  modelValue: string | undefined | Array<string>; // 绑定值
  isString?: boolean;
  title?: string; // 标题
  limit?: number; // 限制上传文件数
  limitSize?: number; // 限制上传文件大小
  disabled?: boolean; // 禁用
  emptyText?: string; // 空文本
}

// uploadImage
export interface UploadImageProp {
  url: string; // 上传地址
  modelValue: string | undefined | Array<string>; // 绑定值
  isString?: boolean;
  title?: string; // 标题
  limit?: number; // 限制上传图片数
  disabled?: boolean; // 禁用
}
```

### emits 事件

```ts
const Emits = defineEmits(['update:modelValue', 'change']);
```

### 暴露参数

`uploadRef` 为原生的 `el-upload`

```ts
defineExpose({
  uploadRef
});
```

### 插槽

- button: 上传按钮插槽
- tip：上传提示插槽
- empty：空插槽

### 按需使用

完整的案例如下

```vue
<script setup>
import { UploadImage, UploadFiles } from '@corgicoding-el/upload';
import '@corgicoding-el/upload/style.css';

const imageUrl = ref(['/images/20240610-test-image.png']);
</script>

<template>
  <UploadImage
    v-model="imageUrl"
    :is-string="false"
    url="/test/upload"
    :limit="5"
    :limit-size="10"
  ></UploadImage>
</template>
```