Reactjs 如何使用图像从React.js发送多部分/表单数据？

我正在尝试使用react表单将表单发送到我的Express.js后端。它只发送文本，不发送文件。通过表单发送文件时是否需要建立表单数据？ 这是我在App.js上的表格

    class App extends Component {
     constructor(props) {
      super(props);
       this.state={
        inputTopValue:'',
        inputBottomValue:'',
        inputImageValue: '',
            }
    this.handleTopChange = this.handleTopChange.bind(this);
    this.handleBottomChange = this.handleBottomChange.bind(this);
    this.handleImageChange = this.handleImageChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
             }

    handleTopChange(event) {
       this.setState({inputTopValue: event.target.value});
               }

   handleBottomChange(event) {
    this.setState({inputBottomValue: event.target.value});
             }

   handleImageChange(event) {
    this.setState({inputImageValue: event.target.value
              }

   handleSubmit(event) {
    event.preventDefault();
    fetch('api/learning', {
        method: 'POST',
        headers: {
          'Content-Type': 'multipart/form-data',
          'Accept': 'application/json'
        },
         body: JSON.stringify({
             topstuff: event.target.topstuff.value,
             bottomstuff: event.target.bottomstuff.value,
             pic1: event.target.myimage.value

         })
    })
  }

   render() {
       return (
         <div className="App">
           <form onSubmit={this.handleSubmit} id="myform" encType="multipart/form-data">
              <input type="text" name="topstuff" placeholder="title" onChange={this.handleTopChange} value={this.state.inputTopValue} /> <br/>
              <input type="text" name="bottomstuff" placeholder="body" onChange={this.handleBottomChange} value={this.state.inputBottomValue} /><br/>
              <input type="file" name="myimage" onChange={this.handleImageChange} value={this.state.inputImageValue} /><br/>
              <input type="submit" value="yeah boy" />
           </form>
       </div>
       );
     }
   }

 export default App;

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
这个州={
输入值：“”，
inputBottomValue:“”，
inputImageValue:“”，
}
this.handleTopChange=this.handleTopChange.bind（this）；
this.handleBottomChange=this.handleBottomChange.bind（this）；
this.handleImageChange=this.handleImageChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleTopChange（事件）{
this.setState（{inputOpValue:event.target.value}）；
}
车把底部更换（事件）{
this.setState（{inputBottomValue:event.target.value}）；
}
handleImageChange（事件）{
this.setState（{inputImageValue:event.target.value）
}
handleSubmit（事件）{
event.preventDefault（）；
获取（'api/学习'{
方法：“POST”，
标题：{
“内容类型”：“多部分/表单数据”，
“接受”：“应用程序/json”
},
正文：JSON.stringify({
topstuff:event.target.topstuff.value，
底层：event.target.bottomsoff.value，
pic1:event.target.myimage.value
})
})
}
render（）{
返回(






);
}
}
导出默认应用程序；

---

如果需要构建FormData，以及如果我仍然需要对其进行字符串化，请指导我构建FormData。

您错误地获取了图像，您需要使用

文件，而不是值，如下所示：

this.setState({inputImageValue: event.target.files[0]})

然后构建FormData：

let formData = new FormData();
formData.append('pic1', event.target.myimage.files[0]);
formData.append('topstuff', event.target.topstuff.value);
formData.append('bottomstuff', event.target.bottomstuff.value);

最后删除
JSON.stringify
，因为您不需要它，用上面的
formData
替换它

顺便说一句：因为您是通过DOM直接引用表单的值，而不是通过状态，所以您可能需要考虑：


一起摆脱国家
或者开始使用state并开始通过state引用表单的值
您好，谢谢。
formData.append（'myimage'，event.target.myimage.files[0]）
这里，第一个参数
myimage
应该表示存储图像的数据库列？我的数据库列称为
pic1
。您在那里使用
myimage
有什么原因吗？我在这里使用
myimage
是因为这是您在表单中使用的，没有其他原因，所以您可以更改它可以是您喜欢的任何名称。但无论您将其更改为什么，这都是您必须在服务器上使用的名称来引用它。我需要标题吗？如果没有标题，它仍然可以工作，但最好的做法是指定它们，所以我会将它们保留在那里