无法在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});

当我记录文件对象时，我得到这个结果

但是当我在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
});