文件/图片上传 version >= 1.3.0

文件/图片上传是分了两个组件

相比原版重构了代码 新增了新功能

注意新版上传不再支持 url用法 只支持 ossId 即绑定值需要为 ossId 不能为 url

string 和 string[]的转换

q: 组件要求string[] 但是我的后端返回为string,string,string 怎么办

a: ...

别那么死板 别那么死板 别那么死板!!! 后端改不了的情况下

• split(',') 不就变成数组了? (赋值前)
• join(',') 不就变成 string 了 提交前

赋值前

if (isUpdate.value && id) {
  const record = await configInfo(id);
  // record.xxx = record.xxx.split(','); 这样写ts会有爆红 但是逻辑没问题
  await formApi.setValues(record);
  // 或者
  formApi.setFieldValue("xxx", record.xxx.split(","));
}

提交前

const data = cloneDeep(await formApi.getValues());
data.xxx = data.xxx.join(",");

另外, 在 form 的 options 中 有一个arrayToStringFields配置 (这个在提交时只会在 handleSubmit 生效 自己研究 不多赘述)

const [BasicForm, formApi] = useVbenForm({
  layout: 'vertical',
  arrayToStringFields: ['images'],
  ...
});

不多解释了... 写代码别太死板 不符合的自己修改就行了 哪怕你把 upload 的源码改为绑定string+join形式 也没啥不对 不符合自己的自行调整就行了

导入

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
keepMissingId	当 OSS ID 查询不到文件时，是否保留列表中的 ID	boolean	false
preview	自定义文件/图片预览逻辑（例如改为下载）	(file: UploadFile) => Promise<void> | void	-
abortOnUnmounted	是否在 onUnmounted 取消上传中的接口	boolean	true
enableDragUpload	是否支持拖拽上传	boolean	false

事件

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[]。

• preview 可自定义预览逻辑 比如: 你可以改为下载

ImageUpload 的默认预览逻辑为点击查看图片 使用ImagePreviewGroup组件

FileUpload 的默认预览逻辑为window.open 比如 pdf 会由浏览器接管可查看 其他(比如 excel word)会进行下载

• 默认的 ossId 查不到信息时会被丢弃 可以通过keepMissingId控制

const ossIds = ref(["1", "2"]);

// 当id1查询不到时会被丢弃 这时候会变为
const ossIds = ref(["2"]);

• 拖拽上传时 文件类型判断由浏览器接管 当文件类型不符合 accept 时 文件不会被 drop 也不会执行 beforeUpload 逻辑 所以也没有 message 提示

• abortOnUnmounted 会在组件卸载时取消上传中的接口 注意不是隐藏 相当于 v-if 和 v-show 的关系

其他

快捷文件上传Demo菜单 sql(跟演示站一样)

mysql 的 其他数据库自行调整 或者手动在菜单管理配置

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', '');