![如何从带有图像的]( "如何从带有图像的")
本文介绍了如何从带有图像的 React.js 发送多部分/表单数据?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用 react 表单将表单发送到我的 Express.js 后端.它只发送文本而不发送文件.通过表单发送文件时是否需要建立一个 FormData ?这是我在 App.js 上的表单
class App extends Component {构造函数(道具){超级(道具)；this.state={inputTopValue:'',inputBottomValue:'',输入图像值:''，}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({inputTopValue: event.target.value});}handleBottomChange(事件){this.setState({inputBottomValue: event.target.value});}handleImageChange(事件){this.setState({inputImageValue: event.target.value}处理提交(事件){event.preventDefault();获取('api/学习'，{方法:'POST'，标题:{'内容类型':'多部分/表单数据'，'接受':'应用程序/json'},正文:JSON.stringify({topstuff: event.target.topstuff.value,底料:event.target.bottomstuff.value，pic1: event.target.myimage.value})})}使成为() {返回 (<div className="应用程序"><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"/></表单>
);}}导出默认应用程序；
如果需要构建 FormData 并且我仍然需要对其进行字符串化，请指导我构建它.
解决方案
你抓取的图片不正确，你需要使用files，而不是value，像这样:
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 而不是通过状态引用表单的值，因此您可能需要考虑:
- 一起摆脱状态
- 或者开始使用状态并开始通过状态引用表单的值
I am trying to send a form to my Express.js back-end using react form. It is sending only the texts but not the file. Do I need to build up a FormData when sending files through the form?Here is my form on 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;
Please guide me to building a FormData if it needs to be built and also if I still need to stringify it.
解决方案
You're grabbing the image incorrectly, you need to use files, not value, like this:
this.setState({inputImageValue: event.target.files[0]})
Then to build 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);
And lastly remove JSON.stringify since you don't need that, and replace it with formData above
By the way: Since you're referring to your form's values directly via the DOM instead of via state you might want to consider:
- getting rid of state all together
- or start using state and start referring to the form's values via state
这篇关于如何从带有图像的 React.js 发送多部分/表单数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！