@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)

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

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

安装

使用 pnpm 下载

pnpm install @corgicoding-el/upload -S

使用

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

<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入参

// 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 事件

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

暴露参数

uploadRef 为原生的 el-upload

defineExpose({
  uploadRef
});

插槽

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

按需使用

完整的案例如下

<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>