如何用Node.js + PUG实现文本与图片同请求提交至后端

当前使用PUG模板构建前端，后端通过multer实现文件上传接口，但前端内联脚本无法正确同时发送文本和文件，需要修正前端代码并确保前后端参数匹配。

解决方案 #

1. 修正前端PUG模板的两处关键问题 #

（1）给表单输入项添加name属性

FormData依赖输入项的name属性识别参数，必须给文本输入框和文件上传框添加对应name：

input(class='input', id='prompt', name='prompt', type='text', placeholder='How can I help?')
input(class='input', id='image', name='image', type='file')

（2）重写内联脚本，使用FormData构建请求体

原脚本错误使用JSON.stringify并手动设置Content-Type，导致multipart/form-data请求格式失效。修改后的脚本如下：

script.
  document.querySelector("#chatForm").addEventListener("submit", async (e) => {
    e.preventDefault();
    const form = document.querySelector("#chatForm");
    const formData = new FormData(form);
    const prompt = formData.get('prompt');
    
    if (prompt.trim()) {
      const response = await fetch('/api/myapi', {
        method: 'POST',
        // 不要手动设置Content-Type，浏览器会自动添加正确的boundary
        body: formData
      });
      
      const data = await response.json();
      document.querySelector("#messages").innerHTML += `<p><strong>You:</strong> ${prompt}</p>`;
      document.querySelector("#messages").innerHTML += `<p><strong>Server:</strong> ${data.message}</p><br>`;
      // 重置表单
      form.reset();
    }
  });

2. 后端处理（multer版本） #

现有multer接口配置已支持单文件上传，只需在myapp.Handle方法中通过以下方式获取参数：

// 在myapp.Handle函数内
const promptText = req.body.prompt; // 获取文本消息
const uploadedImage = req.file; // 获取上传的文件对象，包含路径、大小等信息

3. 若改用express-fileupload的后端处理 #

如果切换到express-fileupload，后端配置和参数获取方式如下：

// 先初始化express-fileupload
const fileUpload = require('express-fileupload');
api.use(fileUpload());

// 接口路由
api.post('/myapi', function (req, res, next) {
  const promptText = req.body.prompt;
  const uploadedImage = req.files.image; // 获取文件对象
  myapp.Handle(req, res, next);
});

关键注意事项 #

• 不要手动设置multipart/form-data的Content-Type，浏览器会自动生成包含boundary的正确头信息，手动设置会导致后端无法解析。
• 必须确保表单输入项的name属性与后端获取参数的名称一致（文本对应prompt，文件对应image）。

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