Node.js中Cloudinary多文件上传仅获取最后一个文件的问题

上传4个文件后，后端仅能获取到最后一个文件，返回的文件数组仅含一个元素。

原因分析 #

• 前端input ID重复：所有文件上传input的ID均为img，对应label的for属性也指向同一ID，导致仅最后一个input被激活，其他文件无法提交。
• Multer未配置多文件接收：当前Multer初始化未指定多文件接收规则，默认仅处理单个文件。
• Cloudinary上传函数未返回结果：uploader函数调用cloudinaryMediaUpload但未返回值，导致urls数组存储的全是undefined。

解决方案 #

1. 修复前端表单（register.ejs） #

给每个文件上传input设置唯一ID，label的for属性对应各自ID；同时将name设为数组形式bussFile[]，方便后端统一接收：

<!-------------------------Files upload section---------------->
<div class="row clearfix">
  <div class="col_half">
    <div class="input_field d-flex justify-content-around">
      <input type="file" name="bussFile[]" accept=".pdf, .png, .jpg, .jpeg" id="incorpDoc" style="display:none;" />
      <label for="incorpDoc" class="btn btn-success"><span class="d-none d-md-inline mr-2"><i aria-hidden="true" class="fas fa-upload"></i></span>Upload Incorporation Document</label>
    </div>
  </div>
  <div class="col_half">
    <div class="input_field d-flex justify-content-around">
      <input type="file" name="bussFile[]" accept=".pdf, .png, .jpg, .jpeg" id="profileDoc" style="display:none;" />
      <label for="profileDoc" class="btn btn-success"><span class="d-none d-md-inline mr-2"><i aria-hidden="true" class="fas fa-upload"></i></span>Upload Company's Profile</label>
    </div>
  </div>
</div>

<div class="row clearfix">
  <div class="col_half">
    <div class="input_field d-flex justify-content-around">
      <input type="file" name="bussFile[]" accept=".pdf, .png, .jpg, .jpeg" id="financialDoc" style="display:none;" />
      <label for="financialDoc" class="btn btn-success"><span class="d-none d-md-inline mr-2"><i aria-hidden="true" class="fas fa-upload"></i></span>Upload Financial Statements</label>
    </div>
  </div>
  <div class="col_half">
    <div class="input_field d-flex justify-content-around">
      <input type="file" name="bussFile[]" accept=".pdf, .png, .jpg, .jpeg" id="pitchDeck" style="display:none;" />
      <label for="pitchDeck" class="btn btn-success"><span class="d-none d-md-inline mr-2"><i aria-hidden="true" class="fas fa-upload"></i></span>Upload Investment Pitch Deck</label>
    </div>
  </div>
</div>

2. 配置Multer接收多文件 #

在路由中修改Multer的调用方式，用array指定接收字段和最大文件数：

// 示例路由配置
const { upload } = require('./path/to/Multer.js');
router.post('/register', upload.array('bussFile', 4), defaultController.registerPost);

3. 修复Cloudinary上传函数的返回值 #

在defaultController.js的uploader函数中返回上传结果，同时修正文件夹名称的变量引用：

const uploader = async (path) => {
  const folderName = businessName
    .trim()
    .toLowerCase()
    .replace(/^[^A-Z0-9]+/gi, function (match) {
      return arguments[2].toUpperCase();
    });

  console.log(folderName);
  // 返回Cloudinary上传结果
  return await cloudinaryMediaUpload(path, folderName);
};

4. 可选：将文件URL存入数据库 #

若需把文件URL保存到Business模型，修改实例创建代码：

const newBusiness = new Business({
  businessName,
  businessAddress,
  businessPhone,
  businessCategory,
  files: urls // 确保Business模型中定义了files字段存储URL数组
});
await newBusiness.save(); // 添加await确保数据保存完成后再跳转

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