如何从带有图像的 React.js 发送多部分/表单数据?

IT技术 reactjs
2021-03-25 06:54:52

我正在尝试使用 react 表单将表单发送到我的 Express.js 后端。它只发送文本而不发送文件。通过表单发送文件时是否需要建立一个 FormData ?这是我在 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;

如果需要构建 FormData 并且我仍然需要对其进行字符串化,请指导我构建它。

1个回答

您抓取的图像不正确,您需要使用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 而不是通过状态引用表单的值,因此您可能需要考虑:

  • 一起摆脱状态
  • 或者开始使用 state 并开始通过 state 引用表单的值
没有它们它仍然可以工作,但最佳实践是无论如何都要指定它们,所以我会把它们留在那里
2021-05-31 06:54:52
myimage在这里使用是因为那是您在表单中使用的内容,背后没有其他原因,因此您可以将其更改为您喜欢的任何内容。但是无论您将其更改为什么,您都必须在服务器上使用该名称来引用它。
2021-06-12 06:54:52
我需要标题吗?
2021-06-15 06:54:52
你好谢谢。formData.append('myimage', event.target.myimage.files[0]);这里,第一个参数myimage应该代表要存储图像的数据库列?我的数据库列称为pic1. 你在那里使用myimage有什么原因吗?
2021-06-16 06:54:52