javascript - react和express中如何一次性上传文件和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(包括文件等子类)。如果未指定这些值，则该值将转换为字符串。

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

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

您应该将每个文本输入一个一个地附加到 formData 对象，每个文本都将作为 req.body 对象的一个​​属性可用:

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