使用 Axios 和 Nuxt 发送 post 请求时 formData 为空

时间:2021-05-28 20:46:15

标签: node.js vue.js axios nuxt.js

我正在为表单制作图片上传器。该网站是在 Nuxt 中构建的,我正在利用 Nuxt 的服务器中间件来创建 nodejs 后端。

我面临的问题是,当我将数据发送到后端时,formData 发送的是空的。但是,如果我运行 formData.values(),它会显示我尝试发送的数据。

这是我的帖子请求:

let formData = new FormData();
formData.append('attachments', this.attachments[0], this.attachments[0].name);
formData.append('first_name', this.first_name);

      axios({
        method: 'post',
        url: '/api/upload',
        data: formData
      }).then(res => {
        console.log('res.success', res);
      }, err => {
        console.log('res.error', err);
      });

上传的文件或名字都不会添加到响应中的 data。奇怪的是,如果我用 data: { firstName: 'Clark', lastName: 'Kent' } 替换数据,这会发送到后端并显示为 req.body

这里供参考的是后端(它仍在进行中,尚未完成)

const express = require('express');
const app = express();

// Parse URL-encoded bodies (as sent by HTML forms)
app.use(express.urlencoded());
// Parse JSON bodies (as sent by API clients)
app.use(express.json());

app.post('/', (req, res) => {
  
  // res.send('Uploads route!');
  // res.send(req.body);
  console.log('req.body', req.body);

});

module.exports = {
  path: '/api/upload',
  handler: app
};

我对这个有点不知所措。任何方向或建议将不胜感激。

0 个答案:

没有答案