Question

我使用Axios更新我的API。无论输入是否有效，我都会通过输入发送请求，并从API获取响应。从那时起，我开始在网站上实现图片功能，并且遇到了很多问题。我必须将所有内容都放入一个以前从未做过的表格数据中并发送。在“ POST”页面上，一切似乎正常。我发送了所有内容，并且一切正常。但是，在我的“ PATCH”页面上，无论发送什么，它都告诉我输入为空，并且它们需要一个值。我在Laravel望远镜上检查，有效载荷似乎是空的。我试图比较这两段代码（AddOrganism有效，OrganismSettings无效），并且找不到错误。

你能帮我吗？

此作品有效：

import React, { Component } from 'react'
import {withRouter} from 'react-router-dom'
import Dashboard from '../Dashboard';
import * as Cookies from 'js-cookie'
import ErrorContainer from '../../components/ErrorContainer';
import axios from 'axios'
import { createOrUpdateFromFlatCoordinates } from 'ol/extent';

export class AddOrganism extends Component {

    constructor(props) {
        super(props);
        this.state = {name: '', description: '', address: '', picture: null}
        this.handleChange = this.handleChange.bind(this);
        this.handleChangePicture = this.handleChangePicture.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    componentDidMount() {
        var places = require('places.js');
        var placesAutocomplete = places({
        appId:",
        container: document.querySelector('#address-input')
        });
    }
    handleChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        this.setState({
          [name]: value
        });
      }

    handleChangePicture(event) {
        this.setState({picture: event.target.files[0]})
    }


    handleSubmit(e) {
        e.preventDefault();
        var formData = new FormData();
        formData.append('name', this.state.name);
        formData.append('description', this.state.description);
        formData.append('address', this.state.address);
        formData.append('picture', this.state.picture);
        var token = Cookies.get('token');
        axios.post('http://localhost:8000/api/organism/create',formData, {
            headers: {
                "Accept": 'application/json',
                "Authorization": `Bearer ${token}`
            }
        }).then(
            (success) => {
                this.setState({loading: false});
                this.props.history.push('/organisme')
            }, (error) => {
                this.setState({errors : error.response.data.data})
                if(error.response.data.redirect != "") {
                    this.props.history.push(error.response.data.redirect)
                }
            }
        )
    }

    render() {
        return (
            <Dashboard>
                <section className="section has-text-centered">
                    <div className="column is-offset-1 is-10">
                    <h1 className="title is-size-1 register-title">Enregistrement d'un organisme</h1>
                        <section className="section organism-register">
                    <form encType="multipart/form-data" className="user-form fullbox-form" method="POST" onSubmit={this.handleSubmit}>
                            <div className="has-text-left input-fixer">
                            <label className="is-size-4">Nom de l'organisme : </label><input type="text" name="name" placeholder="Nom de l'organisme" value={this.state.name} onChange={this.handleChange}/>
                            <label className="is-size-4">Description de l'organisme : </label><textarea name="description" placeholder="Description de l'organisme" value={this.state.description} onChange={this.handleChange}/>
                            <label className="is-size-4">Adresse de l'organisme : </label><input id="address-input" type="text" name="address" value={this.state.address} onChange={this.handleChange}></input>
                            <label className="is-size-4">Ajouter le logo de votre organisme : </label>
                            <input type="file" name="picture" onChange={this.handleChangePicture} />
                            </div>
                            <ErrorContainer errors={this.state.errors} />
                            <button className="button is-primary has-text-left">Soumettre le formulaire</button>
                        </form>
                        </section>
                    </div>
                </section>
            </Dashboard>
        )
    }
}

export default withRouter(AddOrganism)

这不起作用：

import React, { Component } from 'react'
import {withRouter} from 'react-router-dom'
import Dashboard from '../Dashboard'
import Axios from 'axios'
import * as Cookies from 'js-cookie'
import ErrorContainer from '../../components/ErrorContainer'
export class OrganismSettings extends Component {

    constructor(props) {
        super(props);
        this.state = {loading: true, organism: [], name: "", description: "", address: "", picture: null}
        this.getOrganism = this.getOrganism.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChangePicture = this.handleChangePicture.bind(this);
    }

    componentDidMount() {
        this.getOrganism();
        var places = require('places.js');
        var placesAutocomplete = places({

        container: document.querySelector('#address-input')
        });
    }

    getOrganism() {
        Axios.get('http://localhost:8000/api/organism/settings', {headers: {Accept: 'application/json', Authorization: 'Bearer ' + Cookies.get('token')}})
        .then((success) => {
            var organism = success.data.data.organism;
            this.setState({organism: success.data.data.organism, loading: false})
            this.setState({name: organism.name, description: organism.description, address: organism.address})
        }, (error) => {
            this.props.history.push('/organisme/creation')
        })
    }

    handleChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        this.setState({
          [name]: value
        });
      }

      handleChangePicture(event) {
        this.setState({picture: event.target.files[0]})
    }

    handleSubmit(e) {
        e.preventDefault();
        var formData = new FormData();
        formData.append('name', this.state.name);
        formData.append('description', this.state.description);
        formData.append('address', this.state.address);
        formData.append('picture', this.state.picture);
        var token = Cookies.get('token');
        Axios.patch('http://localhost:8000/api/organism/settings', formData, {
            headers: {
                "Accept": 'application/json',
                "Authorization": `Bearer ${token}`,
            }
        }).then(
            (success) => {
                this.setState({loading: false});
                //this.props.history.push('/organisme')
            }, (error) => {
                this.setState({errors : error.response.data.data})
                if(error.response.data.redirect != "") {
                    this.props.history.push(error.response.data.redirect)
                }
            }
        )
    }

    render() {
        return (
            <Dashboard loading={this.state.loading}>
                <section className="section has-text-centered">
                    <div className="column is-offset-1 is-10">
                    <h1 className="title is-size-1 register-title">Paramètres de {this.state.name}</h1>
                        <section className="section organism-register">
                    <form encType="multipart/form-data" className="user-form fullbox-form" method="POST" onSubmit={this.handleSubmit}>
                            <div className="has-text-left input-fixer">
                            <label className="is-size-4">Nom de l'organisme : </label><input type="text" name="name" placeholder="Nom de l'organisme" value={this.state.name} onChange={this.handleChange}/>
                            <label className="is-size-4">Description de l'organisme : </label><textarea name="description" placeholder="Description de l'organisme" value={this.state.description} onChange={this.handleChange}/>
                            <label className="is-size-4">Adresse de l'organisme : </label><input id="address-input" type="text" name="address" value={this.state.address} onChange={this.handleChange}></input>
                            <label className="is-size-4">Ajouter le logo de votre organisme : </label>
                            <input type="file" name="picture" onChange={this.handleChangePicture} />
                            </div>
                            <ErrorContainer errors={this.state.errors} />
                            <button className="button is-primary has-text-left">Soumettre les changements</button>
                        </form>
                        </section>
                    </div>
                </section>
            </Dashboard>
        )
    }
}

export default withRouter(OrganismSettings)

Answer 1

它也是known bug on PHP，Symfony和Laravel，一种解决方法是将_method或PATCH值的PUT参数附加到您的{{ 1}}，而改用formdata：

axios.post

在Laravel存储库上查看此问题以获取更多信息：https://github.com/laravel/framework/issues/13457#issuecomment-340156084

Laravel无法提供带有formData和Axios的PATCH请求的输入数据

1 个答案: