如何在反应和表达中一次上传文件和json数据

Question

我想从表单发送文件以及 JSON 数据 这是我的 react 句柄提交方法。

const formData = new FormData();

formData.append('File', selectedFile);


const data = {
  name: 'vasu',
  email: 'vasutiwari@gmail.com',
  role: 'student'
}

formData.append('data', data);

axios.post('http://localhost:8000/users', formData ).then((result) => {
  console.log('Success:', result);
})
  .catch((error) => {
    console.error('Error:', error);
  });

这是我的 server.js 方法

app.post('/users', upload.single('File') , async (req, res) => {
    console.log(req.file , req.body);
    res.send(req.body);
})

这是我得到的输出

{
   fieldname: 'File',
   originalname: '4eec81ebddc991f6ff017e600dbf58ac.png',
   encoding: '7bit',
   mimetype: 'image/png',
   destination: 'avatars',
   filename: 'File-4eec81ebddc991f6ff017e600dbf58ac.png-1620467341921',
   path: 'avatars\\File-4eec81ebddc991f6ff017e600dbf58ac.png-1620467341921',
   size: 426281
 } [Object: null prototype] { data: '[object Object]' }

我不想要这个 [Object: null prototype] { data: '[object Object]' }，而是想要我发送的 JSON 对象，我也在使用

app.use(express.json())
app.use(express.urlencoded({extended: true}))

我也在使用multer进行文件上传

Answer 1

这就是 mdn 关于 FormData append() 方法参数的说法：

这可以是 USVString 或 Blob（包括 File 等子类）。如果没有指定这些值，则将值转换为字符串。

适用于 javascript 对象的默认字符串转换结果为 '[object Object]' - 这解释了您所看到的结果。

根据 multer 文档，除了文件，他们的中间件实际上似乎期望文本内容类型作为输入，所以这可能是更好的选择。请注意，快速正文解析器不支持 multipart/form-data 内容类型（这是文件上传所必需的），因此它们根本不参与解析。

您应该将每个文本输入一一附加到formData 对象，每个文本都将作为req.body 对象的属性提供：

formData.append('name', 'vasu')
formData.append('email', 'vasutiwari@gmail.com')
formData.append('role', 'student')