前言
最近一直在迭代我的备忘录Web练手项目，上一期完成拍照上传图片功能。 之前仅支持单张图片上传，每次只能上传一张，整理截图、学习素材时操作繁琐。 本次进行功能改造：前端开启图片多选，限制单次最多9张，移除前端图片大小校验，依托Bmob后端云托管图片文件，将图片URL数组存入数据库，同时兼容历史单图笔记数据。下面记录完整改造思路、核心代码与踩坑点。
一、需求梳理
原有功能：单图上传、拍照上传，图片链接以字符串存储在笔记字段。 本次迭代目标：
- 前端文件input开启多选，单次最多选择9张图片；
- 删除前端图片大小校验逻辑，不对大图做前端拦截；
- 循环批量上传图片至Bmob文件存储；
- 数据库字段改造：存储图片URL数组，增加兼容逻辑，旧的单图笔记正常渲染；
- 页面循环渲染多张图片缩略图，捕获上传异常并给出页面提示；
- 保留原有拍照上传能力，拍照后的图片可以追加到图片列表。
备注：虽然前端取消图片大小限制，但Bmob免费版存在服务端文件上限，超大文件提交会触发平台接口报错，前端捕获异常并提示用户。
二、前端核心JS代码（截图配图用）
const imageInput = document.getElementById('img-input');
imageInput.setAttribute('multiple', true);
imageInput.onchange = async function (e) {
let fileList = Array.from(e.target.files);
// 限制最多上传9张图片
if(fileList.length > 9){
alert("最多只能上传9张图片！");
return;
}
const imgUrlArray = [];
// 移除图片size校验，不限制图片大小
for(const file of fileList){
try{
const url = await uploadImageToBmob(file);
imgUrlArray.push(url);
}catch(err){
console.error("图片上传失败", err);
alert('部分图片上传异常，请检查网络');
}
}
saveNote(content, imgUrlArray);
}
三、Python后端代码（Bmob保存笔记）
import bmob
def save_note_images(note_id, note_content, image_url_list):
note_table = bmob.Table("Note")
save_data = {
"content": note_content,
"images": image_url_list # 存储图片url数组
}
if note_id:
# 更新已有笔记
note_table.update(note_id, save_data)
else:
# 新建笔记
note_table.save(save_data)
return save_data
四、关键实现细节
1. 数据结构兼容改造
原images字段存储单张图片链接字符串，现在改为数组。 读取笔记时增加兼容判断：如果读取到的是字符串，自动转为单元素数组，保证历史旧笔记正常展示，不会出现页面渲染报错。
2. 批量上传策略
遍历选中的文件逐个上传，上传成功的图片url存入数组；单张图片上传失败不会中断整体上传流程，页面提示部分图片上传失败，已上传成功图片保留。
3. 9张上限设计
设置单次最多9张，避免一次性选择大量图片，造成大量并发请求，符合日常笔记素材记录的使用场景。
五、功能演示效果
- 文件选择器支持多选本地图片，选中超过9张会弹窗拦截；
- 选中图片批量上传，图片资源托管在Bmob；
- 笔记页面循环渲染全部图片缩略图；
- 拍照上传功能保留，拍照得到的图片可以追加到图片列表。
六、总结
使用Bmob后端云，不需要自己搭建文件存储服务器，快速实现图片托管能力。 本次多图改造，让备忘录可以一次性存放多张截图、素材，笔记记录能力得到提升。 后续可以继续迭代：图片单独删除、图片弹窗预览、图片OCR文字识别等功能，持续打磨这个全栈练手项目。
