如何将下拉选择框选中值传递至Express，实现动态PDF合并数量

前端修改要点 #

• 给<select>标签添加name属性（原代码将name加在<option>上无效，表单数据会以select的name作为键名传递）
• 表单必须使用multipart/form-data编码（上传文件的必填格式），将下拉选择框与文件上传控件放在同一表单中；若用AJAX提交，需同时携带选中值与文件。

调整后的HTML代码 #

<form action="/merge" method="POST" enctype="multipart/form-data">
  <label for="pdfCount">
    <strong>选择要合并的PDF数量</strong>
  </label>
  <select class="form-control" id="pdfCount" name="pdfCount">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>

  <!-- 允许用户上传多个PDF，后端根据选择的数量处理对应数量的文件 -->
  <input type="file" name="pdfs" multiple accept=".pdf">
  <button type="submit">合并PDF</button>
</form>

后端修改要点 #

• 先获取前端传递的pdfCount参数，转为数字类型并做有效性校验
• 动态配置文件上传的最大数量，替换原硬编码的2
• 遍历上传的文件路径，传递给合并函数（需确保mergePdfs支持多文件合并，若原函数仅支持两个参数，需调整为接收数组或剩余参数）

调整后的Express接口代码 #

app.post("/merge", async (req, res, next) => {
  // 获取并校验PDF数量
  const pdfCount = parseInt(req.body.pdfCount);
  if (isNaN(pdfCount) || pdfCount < 1 || pdfCount > 5) {
    return res.status(400).send("请选择有效的PDF数量");
  }

  // 动态生成文件上传中间件
  const uploadMiddleware = upload.array("pdfs", pdfCount);
  uploadMiddleware(req, res, async (err) => {
    if (err) {
      return res.status(400).send(`上传错误：${err.message}`);
    }

    // 校验上传文件数量是否匹配选择的数量
    if (req.files.length !== pdfCount) {
      return res.status(400).send(`请上传${pdfCount}个PDF文件`);
    }

    // 整理所有PDF文件路径
    const pdfPaths = req.files.map(file => path.join(__dirname, file.path));
    
    // 调用合并函数（若原mergePdfs支持数组参数则直接传，否则用扩展运算符展开）
    let mergedResult = await mergePdfs(pdfPaths);
    // 后续可返回合并后的文件或结果提示
    res.send("PDF合并完成");
  });
});

补充说明 #

• 若原mergePdfs函数仅支持两个参数，需修改为支持多文件，示例调整：

// 修改mergePdfs函数为接收任意数量的路径参数
async function mergePdfs(...pdfPaths) {
  // 原合并逻辑适配多文件的实现
}

• 若用AJAX提交，需确保FormData中包含选中值，示例代码：

const form = document.querySelector('form');
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(form);
  const response = await fetch('/merge', {
    method: 'POST',
    body: formData
  });
  const result = await response.text();
  console.log(result);
});

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