React+Node+MySQL项目：多文件上传路径无法存入单列Attachments问题

核心问题分析 #

1. 数组直接插入导致多行存储：把reqFiles数组直接传入SQL插入语句时，MySQL驱动会将数组展开为多个独立值，匹配占位符时会触发多行插入；
2. 文件路径属性取值错误：req.files是数组类型，单个文件的filename属性需要从数组元素中获取，直接访问req.files.filename必然返回undefined。

后端代码修改（index.js） #

需要将文件路径数组转换为字符串格式存入Attachments列，推荐两种实现方式：

方式1：逗号分隔字符串 #

适合简单场景，读取时可通过split(',')还原为数组：

const reqFiles = [];
const url = "http://localhost:3001/images/" // 补全HTTP协议，方便前端直接使用
for (var i = 0; i < req.files.length; i++) {
    reqFiles.push(url + req.files[i].filename)
}
// 将数组转为逗号分隔的字符串
const attachments = reqFiles.join(',');

方式2：JSON字符串（推荐） #

适合复杂场景，MySQL 5.7+支持JSON字段类型，读取时可通过JSON.parse()直接还原数组：

const reqFiles = [];
const url = "http://localhost:3001/images/"
for (var i = 0; i < req.files.length; i++) {
    reqFiles.push(url + req.files[i].filename)
}
// 将数组转为JSON字符串
const attachments = JSON.stringify(reqFiles);

修改SQL插入逻辑 #

将插入参数中的reqFiles替换为转换后的attachments：

q = "INSERT INTO mahalkita(Email, CompanyName, Address, PhoneNumber, PresidentName, AccountManagerEmail, AccountManagerPhone, PICEmail, PICPhone, EstablishedDate, MainBusiness, EmployeeNumber, NumberOfCustomer, Attachments, SKMenhum) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)"
db.query(q, [Email, CompanyName, Address, PhoneNumber, PresidentName, ManagerEmail, ManagerPhone, PICEmail, PICPhone, EstablishedDate, MainBusiness, EmployeeNumber, NumberCustomer, attachments, SK], (err, result) => {
   console.log(err)
   console.log(result)
    res.send("uploaded")
})

额外优化建议 #

1. 数据库字段类型调整：
   如果使用JSON字符串存储，建议将Attachments字段类型从varchar改为TEXT或JSON（MySQL 5.7+），避免长度限制；
2. 前端文件输入优化：
   当前Form.js中input type="file"的onChange存储的是浏览器伪路径，实际无作用（因使用表单直接提交）。若后续改用Axios提交，需使用FormData对象：

// Axios提交多文件示例
const handleSubmit = (e) => {
  e.preventDefault();
  const formData = new FormData();
  // 追加其他表单字段
  formData.append('email', emailLog);
  // 追加文件
  Array.from(e.target.pdfFiles.files).forEach(file => {
    formData.append('pdfFiles', file);
  });
  Axios.post('http://localhost:3001/registration', formData, {
    headers: { 'Content-Type': 'multipart/form-data' }
  });
}

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