使用Bootstrap+Express开发PDF合并工具时上传按钮失效求助

从报错截图来看，核心问题是前端请求POST /merge接口返回404，且后端返回了HTML页面而非JSON，导致前端解析失败。按以下步骤排查修复：

• 检查后端路由配置
  打开项目的Express路由文件（比如routes/index.js或app.js），确认是否存在POST /merge的路由定义。如果没有，添加对应的路由处理：

  const express = require('express');
  const router = express.Router();
  const multer = require('multer'); // 处理文件上传的中间件
  const upload = multer({ dest: 'uploads/' }); // 配置上传文件存储目录
  
  router.post('/merge', upload.array('pdfs'), (req, res) => {
    // 这里编写PDF合并逻辑
    // 注意返回JSON格式响应
    res.json({ success: true, message: '合并成功' });
  });
  
  module.exports = router;
  

  同时确保在app.js中挂载了这个路由：app.use('/', router);

• 验证前端请求地址
  检查前端发起请求的代码（比如script.js），确认请求的URL是/merge，没有拼写错误或额外前缀。示例fetch请求代码：

  fetch('/merge', {
    method: 'POST',
    body: formData
  })
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));
  

• 配置文件上传中间件
  确认项目已安装multer依赖（未安装则执行npm install multer），并且正确配置了文件上传的存储目录，确保目录存在且有读写权限。

• 修复后端响应格式
  即使接口报错，后端也要返回JSON格式的错误信息，避免返回HTML。示例错误处理逻辑：

  router.post('/merge', upload.array('pdfs'), (req, res) => {
    try {
      // 合并逻辑
      res.json({ success: true, result: '合并后的PDF路径' });
    } catch (err) {
      res.status(500).json({ success: false, error: err.message });
    }
  });
  

• 调试请求链路
  启动后端时开启调试日志，比如在app.js中添加app.use(express.logger('dev'));，查看请求是否到达后端，以及路由匹配情况。

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