Appearance
AtUpload
沈孟平
最后更新于 2025-11-18 14:57:11
主要做的封装的目的如下：
- 默认
NUpload上传失败是根据 http status code 进行判断，但是一般后端接口是根据自定义 code 判断，所以这里加了一个isSuccess函数进行自定义判断逻辑，并且需要这个函数返回成功上传的目标文件的结果。 - 根据你传进来的
urlField 和 nameField取得value绑定的值，并自动格式化成NUpload想要的fileList格式。 - 不传
action参数，并监听onChange事件，可以用来在表单中手动上传。
代码演示
基础示例
图片列表
监听文件变化，手动上传
拖拽上传
API
AtUpload Props
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
| value | array | [] | 文件列表数据 类型参考 | |
| is-success | function | undefined | 判断是否上传成功；需要返回成功上传的目标文件的结果 | |
| drag-tip | string | undefined | 拖拽上传提示 | |
| url-field | string | 'url' | 接口返回数据中 url 对应的字段 | |
| name-field | string | 'name' | 接口返回数据中名称对应的字段 | |
| n-upload-props | Omit<UploadProps, 'themeOverrides' | 'imageGroupProps'> | undefined | NaiveUI Upload Props |
AtUpload Slots
| 名称 | 参数 | 说明 | 版本 |
|---|---|---|---|
| default | () | 自定义上传触发器 |