Menu
MallBase Vben Admin 上传组件优先规则；仅在实现图片或文件上传 UI 交互并选择上传组件时使用。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | upload-component-first |
| description | MallBase Vben Admin 上传组件优先规则；仅在实现图片或文件上传 UI 交互并选择上传组件时使用。 |
所有图片/文件上传交互。
#/components/upload/index.vue。FileInfo -> string/数组 转换。import type { FileInfo } from '#/components/upload';
import Upload from '#/components/upload/index.vue';
<!-- 单图上传 -->
<Upload v-model:value="formData.image" type="image" module="goods" />
<!-- 多图上传 -->
<Upload v-model:value="formData.images" type="images" module="goods" :max-count="10" />
<!-- 文件上传 -->
<Upload v-model:value="formData.file" type="file" module="xxx" />
v-model:value 单图绑定类型：FileInfo | string | undefinedv-model:value 多图绑定类型：FileInfo[]module 指定上传模块（如 "goods"、"user" 等）const submitData = {
...formData,
main_image: typeof formData.main_image === 'object'
? formData.main_image?.url || ''
: formData.main_image || '',
images: formData.images.map((img, index) => ({
url: typeof img === 'object' ? img.url : img,
sort: index,
})),
};
<a-input> 让用户手动输入图片 URLfrontend/admin/apps/web-antd/src/components/upload/index.vueMallBase 扩展槽边界规范；涉及会员、积分、分销、余额、优惠等权益扩展接入订单、商品编辑或 UniApp 展示时使用。
MallBase schema 真相源与幂等升级 SQL 规则；升级 SQL 仅在用户明确要求已有库升级时使用。
MallBase ThinkPHP 后端规则索引；仅在需要浏览或选择后端规则、且无法确定具体 ThinkPHP skill 时使用。
MallBase 已有库升级 SQL 边界规则；只有用户明确要求考虑已有库升级、测试服/线上升级或 upgrade SQL 时使用。
MallBase ThinkPHP 模型字段访问器与素材回显规则；在 Model 字段读写、访问器、修改器、with 关联、素材 ID 回显或 Service 字段组装优化时使用。
MallBase preview 演示站分支边界规则；涉及 preview 分支、演示站专用功能、main 与 preview 合并、反向合并、演示站部署或公开演示能力修改时使用。