无法将 multipart/form-data 发送到 nodejs 服务器

Question

我正在尝试在我的 React 应用程序中发送 multipart/formdata。 每次我使用 axios 访问 POST api 时，formdata 始终为空。我尝试转换为 JSON.stringify 和键值方法，但似乎没有任何效果。 我确实将标题设置为'Content-Type': 'multipart/form-data'

postList = (e) => {
    e.preventDefault();


    var postParams;
    if(this.state.message && this.state.parent){

      postParams = {
        message: this.state.message,
        chat_m_id: this.state.parent,
        depth: (1).toString(),
        msg_icon: this.state.msg_icon.name
      }
    }
    else{    
      postParams = {
        message: this.state.message,
        chat_m_id: (0).toString(),
        depth: (0).toString(),
        msg_icon: this.state.msg_icon.name
      }
    }
    console.log(postParams);
    let bodyFormData = new FormData();

    //approach-one
      bodyFormData.append('data',postParams);

    //approach-one
      // bodyFormData.append('data',JSON.stringify(postParams));

    //approach-three
      // for (let [key, value] of Object.entries(postParams)) {
      //     bodyFormData.append(`'${key}'`, JSON.stringify(`${value}`));
      // }

console.log(bodyFormData) //this is always empty


    axios.post(GlobalVar.BASE_URL+'api/msgtemplate/create', bodyFormData, {headers: GlobalVar.headersFormData})
    .then(res => {
      console.log(res)
      this.props.history.push('/messages')
    })
    .catch(err => console.log(err.res));

  }

我花了几个小时来解决这个问题，请帮助解决它。

Answer 1

下面是一个使用 axios 发送文件的例子：

在你的情况下，我在这里调试了你的代码： https : //codesandbox.io/s/react-example-ypnbv? fontsize =14& hidenavigation =1& theme =dark

state = { selectedFile: null }
//handler for file change event
fileChangedHandler = event => {
  this.setState({ selectedFile: event.target.files[0] })
}

  uploadHandler = () => {
    const formData = new FormData()
    formData.append(
      'myFile',
      this.state.selectedFile,
      this.state.selectedFile.name
    )
    axios.post('my-domain.com/file-upload', formData)
  }