无法通过reactjs中的html表单进行post调用和发送文件

Question

我是新来的，努力想找到我的答案，但我仍然有同样的问题。我已经检查了所有类似的问题和答案，但没有一个能帮助我，所以如果你知道同样的问题

我有一个html表单，它假设接受一个zip文件和一个字符串，然后希望通过Post方法将它们传递给Web服务。

我有其余的api服务器，这是我通过Spring boot编写的，现在尝试制作一个客户端测试项目来测试它。Postman的测试是成功的，我发送请求并接收响应没有问题，但是使用此API，我没有成功。通过我从互联网资源中学到的东西，我已经在我的应用程序中改变了很多，这是我卡住的最后一步

如果有人能帮我找到这个错误，我将不胜感激。

这是我的ReactJs代码：

import React, {Component} from 'react';
import img from "./images/test.jpg"
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css'; 

class DoPost extends Component {

    constructor(props) {
        super(props);
        this.handleSubmit  = this.handleSubmit.bind(this);
        this.state = {
            id:null,
            fileData:null,
            url:"http://localhost:8990/getId"
        };
    }





    handleSubmit(event) {

        let formData = new FormData();
        formData.append('fId', this.fId.value);
        formData.append('inputPackage', this.inputPackage.value); 
        console.log(this.fId.value);
        console.log(this.inputPackage.value);
        fetch(this.state.url, { 
            method: 'POST',
            body: formData
        }).then(res => {
            alert(res);
        });


    }



    render() {

        return (<div>
                <section className="login-block">
                    <div className="container">
                        <div className="row">
                            <div className="col-md-4 login-sec">
                                <form onSubmit={this.handleSubmit}>
                                    <label htmlFor="fId">fId Id:</label>
                                    <input type="text" name="fId" id="fId" ref={el => this.fId = el} /><br/><br/>
                                     <div className="form-group files color">
                                        <label>Upload Your File </label>
                                        <input type="file" name="inputPackage" ref={el => this.inputPackage = el}  required
                                                className="file-controller"/>
                                    </div>
                                    <div className="align-center">
                                        <input type="submit" className="btn btn-lg btn-info " value="Send the request" />
                                    </div>
                                </form>
                            </div>
                            <div className="col-md-8 banner-sec">
                                <div id="carouselExampleIndicators" className="carousel slide" data-ride="carousel">
                                    <div className="carousel-inner" role="listbox">
                                        <div className="carousel-item">
                                            <img className="d-block img-fluid" src={img} alt="First slide"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        );
    }
}

export default DoPost;

Answer 1

我不知道你在这里得到的错误是什么，但你的抓取在某种程度上是错误的。fetch的第一个响应是一个promise，你需要处理它。

fetch(this.state.url, { 
            method: 'POST',
            body: formData
        })
         .then( res => res.json())
         .then( res => {
            alert(res);
        })
);

此外，您需要在handleSubmit方法中添加event.preventDefault（）以防止表单提交后刷新。

handleSubmit(event) {
    event.preventDefault();
    let formData = new FormData();
    ...