如何在 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（包括 File 等子类）。如果指定了其中的 none 个，则该值将转换为字符串。

适用于 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')

如何在 React 和 Express 中一次上传文件和 json 数据

How to upload file and json data at once in react and express

javascript

node.js

express

reactjs

multer