无法进行通话后，并通过在reactjs HTML形式发送文件(Unable to make post

我在reactjs新的尝试很难找到我的答案，但我仍然有同样的问题。 我已经检查像所有相同的问题和答案本 ，但因此，如果您知道任何相同的Q＆A请让我知道他们不帮我。

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

我有我的春天启动编写的REST API服务器，现在尽量让客户测试项目的测试。 通过邮差测试是成功的，我发送请求和接收无问题的反应，但与此API我是不成功的。 我已经通过我从网上学到的资源改变了很多在我的应用程序，这是最后一步，我被困

我将不胜感激，如果有人可以帮助我找到的bug。

这是我的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是有点不对。 从第一个响应fetch是一种承诺，你需要处理它。

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

此外，您还需要添加event.preventDefault()在你的handleSubmit方法，以防止表单提交后，令人耳目一新。

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

文章来源: Unable to make post call and send file via html form in reactjs