如何从带有图像的 React.js 发送多部分/表单数据? [英] how to send a multipart/form-data from React.js with an image?

问题描述

我正在尝试使用 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 发送多部分/表单数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！