@saberlayer/vue-file-uploader/src/types/index.ts

A file uploader component for Vue 2.x and Vue 3.x

/**
 * 文件上传组件的属性接口定义
 */
export interface FileUploaderProps {
  /** 上传的目标地址 */
  action: string;
  
  /** 是否支持多文件上传 */
  multiple?: boolean;
  
  /** 接受的文件类型，例如 '.jpg,.png' */
  accept?: string;
  
  /** 文件大小限制（字节），0 表示不限制 */
  maxSize?: number;
  
  /** 最大文件数限制，0 表示不限制 */
  maxCount?: number;
  
  /** 自定义请求头 */
  headers?: Record<string, string>;
  
  /** 上传时附带的额外参数 */
  data?: Record<string, any>;
  
  /** 是否在选择文件后自动上传 */
  autoUpload?: boolean;
  
  /** 已上传的文件列表 */
  fileList?: UploadFile[];
  
  /** 是否禁用 */
  disabled?: boolean;
  
  /** 是否启用拖拽上传 */
  drag?: boolean;
}

/**
 * 上传文件对象的接口定义
 */
export interface UploadFile {
  /** 文件唯一标识 */
  uid: string;
  
  /** 文件名 */
  name: string;
  
  /** 文件大小（字节） */
  size: number;
  
  /** 文件类型 */
  type: string;
  
  /** 文件状态：ready-准备上传，uploading-上传中，success-上传成功，error-上传失败 */
  status: UploadStatus;
  
  /** 上传进度（0-100） */
  percentage?: number;
  
  /** 服务器响应数据 */
  response?: any;
  
  /** 文件访问地址 */
  url?: string;
  
  /** 上传失败的错误信息 */
  error?: any;
}

export type UploadStatus = 'ready' | 'uploading' | 'success' | 'error';

/**
 * 上传响应数据的接口定义
 */
export interface UploadResponse {
  /** 上传是否成功 */
  success: boolean;
  
  /** 响应消息 */
  message?: string;
  
  /** 文件访问地址 */
  url?: string;
  
  /** 其他响应数据 */
  data?: any;
}

export interface FileUploaderContext {
  emit: FileUploaderEmits;
  expose: (exposed: Record<string, any>) => void;
}

export interface FileUploaderEmits {
  (e: 'change', payload: { file: UploadFile; fileList: UploadFile[] }): void;
  (e: 'success', file: UploadFile, fileList: UploadFile[]): void;
  (e: 'error', error: any, file: UploadFile): void;
  (e: 'progress', file: UploadFile, percentage: number): void;
  (e: 'exceed', files: File[]): void;
  (e: 'update:fileList', fileList: UploadFile[]): void;
}