Upload 上传
规则
基础示例
Props 配置示例
图片上传
文件上传
限制文件大小
整段禁用
Events 事件示例
监听上传状态
上传后更新其他字段
完整配置项:TDesign_Upload
value：Array
注意
文件上传成功后需要通过 onSuccess 回调，将接口返回内容中的 url 赋值给 file.url，否则表单获取不到组件的数据。
Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| abridgeName | 文件名过长时保留首尾长度 | Array<number> | - | - |
| accept | 接受上传的文件类型 | string | - | - |
| action | 上传接口地址 | string | - | - |
| allowUploadDuplicateFile | 是否允许重复文件名 | boolean | false | - |
| autoUpload | 选择文件后是否自动上传 | boolean | true | - |
| beforeAllFilesUpload | 全部文件上传前钩子 | (file: UploadFile[]) => boolean | Promise<boolean> | - | - |
| beforeUpload | 单文件上传前钩子 | (file: UploadFile) => boolean | Promise<boolean> | - | - |
| cancelUploadButton | 取消上传按钮属性 | ButtonProps | TNode | - | - |
| data | 上传请求额外字段 | Record<string, any> | function | - | - |
| default | 触发上传元素 / 拖拽区域 | string | TNode | - | - |
| disabled | 是否禁用 | boolean | - | - |
| dragContent | 自定义拖拽区域（theme=custom） | TNode | - | - |
| draggable | 是否启用拖拽上传 | boolean | - | - |
| fileListDisplay | 完全自定义文件列表 UI | TNode<{ files; dragEvents? }> | - | - |
| files | 已上传列表（v-model:files） | Array<UploadFile> | [] | - |
| defaultFiles | 非受控文件列表 | Array<UploadFile> | [] | - |
| format | 转换 UploadFile 结构 | (file: File) => UploadFile | - | - |
| formatRequest | 自定义上传请求参数 | function | - | - |
| formatResponse | 格式化上传响应 | function | - | - |
| headers | 请求头 | Record<string, string> | - | - |
| imageViewerProps | 透传图片预览 | ImageViewerProps | - | - |
| inputAttributes | 添加到 input 的属性 | CSSProperties | - | - |
| isBatchUpload | 多文件作为独立包整体替换 | boolean | false | - |
| locale | 组件文本语言配置 | UploadConfig | - | - |
| max | 上传数量上限（0 不限制） | number | 0 | - |
| method | HTTP 请求类型 | string | POST | - |
| mockProgressDuration | 模拟进度间隔（ms） | number | - | - |
| multiple | 多文件上传 | boolean | false | - |
| name | 上传字段名 | string | file | - |
| placeholder | 占位符 | string | - | - |
| requestMethod | 自定义上传方法 | function | - | - |
| showImageFileName | 是否显示图片文件名 | boolean | true | - |
| showThumbnail | 文件列表是否显示缩略图 | boolean | false | - |
| showUploadProgress | 是否显示上传进度 | boolean | true | - |
| sizeLimit | 文件大小限制 | number | SizeLimitObj | - | - |
| status | 提示文本状态 | default | success | warning | error | - | - |
| theme | 组件风格 | custom | file | file-input | file-flow | image | image-flow | file | - |
| tips | 组件下方提示 | string | TNode | - | - |
| trigger | 触发上传元素 | TNode<TriggerContext> | - | - |
| triggerButtonProps | 选择按钮属性 | ButtonProps | - | - |
| uploadAllFilesInOneRequest | 同一请求上传全部文件 | boolean | false | - |
| uploadButton | 点击上传按钮属性 | ButtonProps | TNode | - | - |
| uploadPastedFiles | 是否允许粘贴上传 | boolean | true | - |
| useMockProgress | 是否显示模拟进度 | boolean | true | - |
| value | 已上传列表（同 files） | Array<UploadFile> | [] | - |
| defaultValue | 非受控列表 | Array<UploadFile> | [] | - |
| withCredentials | 请求是否携带 cookie | boolean | false | - |
Events
| 事件 | 说明 | 类型 | 版本 |
|---|---|---|---|
| cancelUpload | 点击取消上传 | () => void | - |
| change | 文件列表变化 | (value, context: UploadChangeContext) => void | - |
| dragenter | 进入拖拽区域 | (context: { e: DragEvent }) => void | - |
| dragleave | 离开拖拽区域 | (context: { e: DragEvent }) => void | - |
| drop | 拖拽结束 | (context: { e: DragEvent }) => void | - |
| fail | 上传失败 | (options: UploadFailContext) => void | - |
| oneFileFail | 单文件上传失败（多文件） | (options: UploadFailContext) => void | - |
| oneFileSuccess | 单文件上传成功 | (context) => void | - |
| preview | 图片预览 | (options: { file; index; e: MouseEvent }) => void | - |
| progress | 上传进度变化 | (options: ProgressContext) => void | - |
| remove | 移除文件 | (context: UploadRemoveContext) => void | - |
| selectChange | 选择文件后、上传前 | (files: File[], context) => void | - |
| success | 上传成功 | (context: SuccessContext) => void | - |
| validate | 上传校验结束 | (context: { type: UploadValidateType; files }) => void | - |
| waitingUploadFilesChange | 待上传列表变化 | (context: { files; trigger }) => void | - |