基于React+Node.js+MySQL实现多图上传关联自定义标题的方案咨询

1 前端现有问题修复 #

你当前代码的标题输入框onChange事件逻辑错误，没有把用户输入内容更新到state，导致提交的title永远为null，先修复这部分：
把原标题输入框代码替换为：

<input 
  type="text" 
  onChange={ (e)=> this.setState({title: e.target.value}) } 
  placeholder="请输入批次名称" 
  className="form-control"
  required
/>

可以补充非空校验，上传触发时先判断this.state.title是否为空，为空直接提示用户先输入标题。 #

2 MySQL表结构设计 #

采用一对多结构存储批次和对应图片，新建两张表：

2.1 图片批次表（image_groups） #

存储每个批次的标题核心信息：

可选：如果是多用户系统，可新增user_id字段关联对应用户

2.2 图片详情表（images） #

存储单张图片信息，关联对应所属批次：

3 后端接口逻辑实现 #

你的/api/profile/multiple-file-upload接口按以下逻辑处理：

1. 接收前端提交的title和所有图片文件
2. 校验title是否为空，为空直接返回错误
3. 把所有图片上传到你使用的存储服务（当前为S3），拿到每一张图片的公网访问URL
4. 开启数据库事务：
   • 第一步：往image_groups表插入一条记录，携带title信息，拿到插入后生成的自增id作为group_id
   • 第二步：把所有图片的group_id、访问URL、文件名等信息批量插入images表
5. 事务提交，返回上传成功响应；如果任意一步失败，事务回滚，返回对应错误信息

4 批次图片查询逻辑 #

后续需要通过标题调取对应批次图片时，编写查询接口：

1. 接收前端传入的批次标题或者批次ID
2. 关联image_groups和images表，查询对应group_id下的所有图片URL
3. 返回图片列表给前端渲染即可
   如果需要支持标题模糊搜索，可使用like语句查询

内容的提问来源于stack exchange，提问作者Tamil Bloggers