@yu-ui/gd-upload

该组建内部对接了文件中心的接口，用于文件的上传，下载以及展示。 如果是png,jpg,gif等图片格式会提供预览功能，如果是pdf,word,ppt等以及自定义格式则提供下载功能，会展示内置的icon

快速上手

@yu-ui/gd-upload组件内部使用了ant-design-vue,所以要求项目中要安装ant-design-vue,如果没有安装那么npm或者pnpm会自动在node_modules里面安装ant-design-vue依赖,可能后续会导致包依赖重复的问题，请知晓！！！

一、安装依赖

pnpm i @yu-ui/gd-upload

二、使用依赖

<script setup lang="ts">
// 引入上传组件包
import GdUpload from "@yu-ui/gd-upload";
// 引入axios实例
import http from "./utils/http/request.ts";
import { ref } from "vue";
const fileList = ref([]);
</script>

<template>
  <GdUpload
    :http="http"
    :file-list="fileList"
    business="seal"
    proxy-prefix="/api"
  />
</template>

属性介绍

{
  /**
   * 业务类型，如: seal
   */
  business: string;
  /**
   * proxy 代理的关键字 如: '/api'
   * 这个主要是用来做图片的回显操作，获取回显地址接口返回的是一个相对路径
   * 也就是说跟着项目服务走的，所以这边要跟着使用项目的代理去走，到时候做好判断
   * 如果是build的时候，把这个代理去掉，使用import.meta.env.PROD判断当前环境
   */
  proxyPrefix?: string;
  /**
   * 接受上传的文件类型, 详见 input accept Attribute
   * 如果不做限制，不需要使用该属性 ['.png']
   */
  accept?: string[];
  /**
   * 是否禁用
   */
  disabled?: boolean;
  /**
   * 限制上传数量。当为 1 时，始终用最新上传的文件代替当前文件
   */
  maxCount?: number;
  /**
   * 允许文件最大值
   */
  maxSize?: number;
  /**
   * 已经上传的文件列表（受控）
   */
  fileList: { id: string }[];
  /**
   * 接受一个`axios`实例，插件会根据传入的实例进行`get,post,delete`等请求，axios实例传入的目的是为了使用项目本身的`axios拦截器`
   */
  http: AxiosInstance;
  /**
   * img 的宽
   */
  itemWidth?: number;
  /**
   * img 的高
   */
  itemHeight?: number;
}

方法

• updateFileList(list: FileListType[]) 手动更新回显

uploadRef.value.updateFileList(fileList.value);