轻量级方案单图改多图前后端改动最小化一、 核心设计思想设计原则上传接口保持“一次传一张、返回一个 URL”不变仅在应用层把“单张”循环扩展为“多张”。前端策略收集 N 个 URL 组成数组通过并发上传获取完整 URL 列表后端策略将 URL 数组序列化为 JSON 字符串存入单个数据库字段读取时反序列化回 List方案评估无需修改上传底层逻辑、无需新建关联表改动最小。虽然牺牲了图文 SQL 深入检索的能力但满足记录、动态展示等“按条展示”的业务场景。二、 后端改动Spring Boot MyBatis-Plus1. 实体 / 数据库设计将原来的单 URL 字段修改为存储 JSON 数组字符串的字段// Gain.java private String imageUrls; // 数据库实际存储值[http://img1.png,http://img2.png]2. DTO / VO 传输层定义// GainCreateRequest / GainUpdateRequest (请求入参) private ListString imageUrls; // 原字段private String imageUrl // GainVO (响应出参) private ListString imageUrls;3. Service 层业务逻辑与类型转换注入ObjectMapper在业务边界处理List ↔ JSON 字符串的相互转换// 1. 写库ListString - JSON 字符串 g.setImageUrls(toJson(req.getImageUrls())); // 2. 读库JSON 字符串 - ListString v.setImageUrls(parseImages(g.getImageUrls())); // ------------------- 序列化 / 反序列化工具方法 ------------------- private String toJson(ListString urls) { if (urls null) { return []; } try { return objectMapper.writeValueAsString(urls); } catch (Exception e) { throw new RuntimeException(图片列表序列化失败, e); } } private ListString parseImages(String json) { if (json null || json.isBlank()) { return List.of(); } try { return objectMapper.readValue(json, new TypeReferenceListString() {}); } catch (Exception e) { // 兜底机制解析失败时返回空列表避免单条数据异常导致整页崩掉 return List.of(); } }⚠️Update 判空细节提醒更新方法中判断逻辑需同步调整为if (req.getImageUrls() ! null)。注意不要使用isEmpty()因为“空列表[]” 代表用户意图“清空所有图片”属于合法的更新逻辑三、 前端改动Vue 31. 节点属性与响应式数据绑定在input节点上加上multiple属性并将单对象修改为数组装载input typefile acceptimage/* hidden multiple changeonPickImage /const pendingImages ref([]) // 原const pendingImage ref(null) function onPickImage(e) { const files Array.from(e.target.files || []) e.target.value // 关键操作重置 input 框 value保证可重复选择同名/同一张图片 files.forEach((f) { if (!f.type.startsWith(image/)) { ui.toast(请选择图片文件) return } pendingImages.value.push({ file: f, url: URL.createObjectURL(f) }) }) }2. 提交保存并发上传图片并收集 URL// 利用 Promise.all 并发上传多张图片并行处理提升速度 const imageUrls await Promise.all( pendingImages.value.map((p) uploadApi.image(p.file).then((r) (r r.url) || ) ) ) // 组装参数提交后端 await gainStore.add({ content, imageUrls, audioUrl, audioDur, tags })3. 视图渲染与预览删除!-- 列表展示从 v-if 升级为 v-for 循环渲染 -- img v-for(u, i) in g.imageUrls :keyi :srcu alt图片 /预览区移除单张图片逻辑直接对本地待上传数组调用pendingImages.value.splice(i, 1)即可。四、 通用套路总结步骤维度 单图旧 多图新①数据存储数据库字段存单个 URL 字符串数据库字段存JSON 数组字符串②上传接口不动保持原样仍然是“一次一张、返回 URL”③DTO / VO 边界String imageUrlListString imageUrls(序列化 / 反序列化在 Service 边界完成)④前端处理ref(null) 单次上传ref([])multiplePromise.all批量并发 v-for
