Невозможно сделать звонок и отправить файл через html-форму реагировать - PullRequest
0 голосов
/ 21 сентября 2018

Я новичок в реагировании и очень старался найти ответ, но у меня все еще остается та же проблема.Я проверил все те же вопросы и ответы, такие как this , но ни один из них не помог мне, поэтому, если вы знаете какие-либо вопросы и ответы, пожалуйста, дайте мне знать.

У меня есть HTML-форма, которая предполагаетпримите один zip-файл и одну строку, а затем захотите передать их веб-службе с помощью метода Post.

У меня есть оставшийся api-сервер, который я написал при загрузке Spring, и теперь попробуйте создать тестовый проект для клиента.Попробуй это.Тест Почтальона прошел успешно, и я отправляю запрос и получаю ответ без проблем, но с этим 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;

1 Ответ

0 голосов
/ 21 сентября 2018

Я не знаю, какую ошибку вы получили здесь, но ваш 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();
    ...
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...