文件/图片上传 version >= 1.3.0
文件/图片上传是分了两个组件
相比原版重构了代码 新增了新功能
注意新版上传不再支持 url用法 只支持 ossId 即绑定值需要为 ossId 不能为 url
导入
js
import { FileUpload, ImageUpload } from "#/components/upload";共同的类型 BaseUploadProps
| 参数 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| v-model:value | 双向绑定 ossId | string | string[] | [] |
| api | 上传接口 | UploadApi | - |
| removeOnError | 文件上传失败是否从展示列表中删除 | boolean | true |
| showSuccessMsg | 上传成功是否展示提示信息 | boolean | true |
| removeConfirm | 删除文件前是否需要确认 | boolean | false |
| accept | 同 antdv 参数，定义可接受文件类型 | string | - |
| acceptFormat | 自定义文件类型显示逻辑（例如将 application/pdf 转换为用户友好格式） | ((accept: string) => string) | string | 原始 accept 值 |
| data | 附带的请求参数 | any | - |
| maxCount | 最大上传数量（为 1 时绑定为 string 而非 string[]） | number | 1 |
| maxSize | 文件最大大小（单位：M） | number | 5 |
| disabled | 是否禁用 | boolean | false |
| helpMessage | 是否显示提示文案（例如“请上传不超过...”） | boolean | true |
| multiple | 是否支持多选文件（需按住 Ctrl） | boolean | false |
| directory | 是否支持上传文件夹 | boolean | false |
| deepWatch | 是否开启深度监听（监听内部元素变化） | boolean | false |
| keepMissingId | 当 OSS ID 查询不到文件时，是否保留列表中的 ID | boolean | false |
| preview | 自定义文件/图片预览逻辑（例如改为下载） | (file: UploadFile) => Promise<void> | void | - |
| abortOnUnmounted | 是否在 onUnmounted 取消上传中的接口 | boolean | true |
| enableDragUpload | 是否支持拖拽上传 | boolean | false |
事件
typescript
export interface UploadEmits {
(e: "success", file: RcFile, response: UploadResult): void;
(e: "remove", file: UploadFile): void;
(e: "change", info: UploadChangeParam): void;
}插槽
| 名称 | 描述 | 参数 |
|---|---|---|
| helpMessage | 自定义帮助信息插槽 | { maxCount, disabled, maxSize, accept } |
注意事项
- 当
maxCount为 1 时候，上传组件会绑定为string，而不是string[]。 - 默认
未开启深度监听即父组件定义的 v-mode:value 内存地址不改变时, 通过 push 等方法修改数组不会触发 watch
js
// 可以被监听到
list.value = [...list.value, xxx];
// 不会被监听到
list.value.push(xxx);当然 你可以使用deepWatch来启用深度监听 这样每次改变都会触发 watch 需要注意内部的上传/删除也会触发
- preview 可自定义预览逻辑 比如: 你可以改为下载
ImageUpload 的默认预览逻辑为点击查看图片 使用ImagePreviewGroup组件
FileUpload 的默认预览逻辑为window.open 比如 pdf 会由浏览器接管可查看 其他(比如 excel word)会进行下载
- 默认的 ossId 查不到信息时会被丢弃 可以通过
keepMissingId控制
js
const ossIds = ref(["1", "2"]);
// 当id1查询不到时会被丢弃 这时候会变为
const ossIds = ref(["2"]);拖拽上传时 文件类型判断由浏览器接管 当文件类型不符合 accept 时 文件不会被 drop
也不会执行 beforeUpload 逻辑所以也没有 message 提示abortOnUnmounted 会在组件卸载时取消上传中的接口
注意不是隐藏相当于 v-if 和 v-show 的关系
其他
快捷文件上传Demo菜单 sql(跟演示站一样)
mysql 的 其他数据库自行调整 或者手动在菜单管理配置
sql
INSERT INTO `sys_menu` (`menu_id`, `menu_name`, `parent_id`, `order_num`, `path`, `component`, `query_param`, `is_frame`, `is_cache`, `menu_type`, `visible`, `status`, `perms`, `icon`, `create_dept`, `create_by`, `create_time`, `update_by`, `update_time`, `remark`) VALUES (1905430203187712002, '文件上传Demo', 0, 1000, 'upload_test', '演示使用自行删除/upload/index', NULL, 1, 0, 'C', '0', '0', NULL, '#', 103, 1, '2025-03-28 09:22:16', 1, '2025-03-28 09:22:16', '');