Node.js后端未正确接收表单数据

Question

我在我的react.js前端有一个提交表单，我使用filepond来获取文件，我没有想出一个发送文件的好方法，就是使用表单数据，来发送文件。

fileItems.forEach((item, i) => {
     console.log(typeof item.file)
     const json = JSON.stringify(item.file);
     const blob = new Blob([json], {
           type: 'application/json'
             });
     const data = new FormData();
     data.append("document", blob)
     fileObjects.push({
           name: item.file.name,
           data: data
           });
       });
    this.setState({fileObjects});

当我记录fileObjects时，我会得到以下结果

​

​

但是，当我在node.js后端记录输出时，数据只是一个空对象。

   result: [ { name: 'Udklip.PNG', data: {} } ] }
 [ [ { name: 'Udklip.PNG', content: {} } ] ]

我创建了一个处理程序，将请求发送到我的node.js后端，如下所示：

onSubmitHandler = (e) =>{
  e.preventDefault()
  const contactRequest = {
      email: this.state.email,
      name: this.state.name,
      message: this.state.message,            
      result: this.state.fileObjects
  }


const form = axios.post('/api/form', contactRequest)
console.log(contactRequest)
console.log(form)
}

如何向node.js后端发出POST请求，并正确解析文件？

Answer 1

MDN中的此条目显示how to add files objects to FormData

FilePond file item有一个file属性，它是实际的文件。

var file = item.file;
var myFormData = new FormData();
myFormData.append('document', file, file.name);

现在您可以将表单数据发送到Axios：

axios({
  method: 'post',
  url: '/api/form',
  data: myFormData
});

Answer 2

我在使用multer时也遇到了同样的问题。但是，我不得不将它们添加为中间件，因为它处理多部分/表单数据。没有它，你就不能在后台处理表单数据。

import multer from 'multer'

var multer_middleware= multer()    
router.post("/signup", multer_middleware, signup);

没有multer，你就不能处理表单数据，我建议使用multer，因为它有很好的方法来处理文件。