Quasar v2 q-uploader组件自定义form fields未传递到Node.js后端问题求助

前端侧排查&修正 #

• 先确认Quasar版本是否匹配：form-fields属性仅在Quasar v1.15+/v2.0+ 版本中支持，低于该版本需要通过@added事件手动给文件追加字段，示例代码：

// 低版本Quasar兼容写法
onFileAdded(file) {
  file.fields = {
    name: 'value'
  }
}

• 若使用符合要求的版本，可先去掉form-fields前的动态绑定冒号测试静态字段是否生效：

<q-uploader
  url="http://localhost:3000/api/upload/new"
  label="Max. size: 10 MB"
  accept=".pdf, image/*"
  max-file-size="10485760"
  with-credentials
  form-fields="[{name: 'name', value: 'value'}]"
  @rejected="onRejected"
/>

• 校验前端配置生效结果：打开浏览器网络面板，查看对应上传请求的Payload标签，确认Form Data分区下是否已经出现你定义的name: value字段，若此处已经存在字段，说明前端配置正常，问题出在后端解析逻辑。

后端侧排查&修正 #

你直接打印req.body为空是正常现象：multipart/form-data类型的上传请求，Express默认的express.json()、express.urlencoded()中间件不会解析该类型的请求体，必须调用formidable的parse方法才能同时拿到额外字段和上传文件，修正后的代码示例：

router.post("/api/uploads/new", async (req, res) => {
  const form = new formidable.IncomingForm();
  // 调用parse方法解析请求体获取字段和文件
  form.parse(req, (err, fields, files) => {
    if (err) {
      return res.status(500).json({ error: '请求解析失败' })
    }
    console.log(fields); // 此处即可获取到前端传的{name: 'value'}
    console.log(files); // 此处为上传的文件对象
    // 后续业务逻辑
  })
  ...
}

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