上传文件reactjs err 400

Question

当我尝试上传文件时出现此错误

未捕获（承诺中）错误：请求失败，状态码为 404"。

我不明白为什么。这是我的一段代码。

        import React, {Component}from 'react';

    import '../css/formLocation.css';

    import axios from 'axios'

    

    class FormLocation extends Component {

      constructor(props) {

        super(props);

        this.state = { 

          file : null

         }

      }

    

    

      handleClick9 = (e) => {

      e.preventDefault();

      this.setState({step9 : true})

      const formData = new FormData();

      formData.append('images' , this.state.media)

      axios.post('http://localhost:1337/testmedias/', formData)

        .then((response) => {

          console.log(response);

        })

      }  

    

      

      handleChangefile = e => {

      this.setState({

        media : e.target.files[0]

      })

      }

      

      render() { 

        return ( 

          <form>

          <div className='form' id='input' >

             

              <h6 className={this.state.step9? 'true': 'false'}>Ajoutez des images ?</h6>

              <input type='file' name='media' className='input' onChange={this.handleChangefile}/>

              <br/>

              <button onClick={this.handleClick9} >Soumettre</button>

          </div>

      </form>

         );

      }

    }

     

export default FormLocation;

我正在为 API 使用 Strapi。先感谢您。

Answer 1

我不认为你的代码有问题。它给出了 404 的错误，这意味着没有您调用的 API。

Answer 2

尝试这样的事情import React, {Component}from 'react';&nbsp; &nbsp; import '../css/formLocation.css';&nbsp; &nbsp; import axios from 'axios'&nbsp; &nbsp; class FormLocation extends Component {&nbsp; &nbsp; &nbsp; constructor(props) {&nbsp; &nbsp; &nbsp; &nbsp; super(props);&nbsp; &nbsp; &nbsp; &nbsp; this.state = {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; file : null&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; handleClick9 = (e) => {&nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; this.setState({step9 : true})&nbsp; &nbsp; &nbsp; const formData = new FormData();&nbsp; &nbsp; &nbsp; formData.append('images' , this.state.media)&nbsp; &nbsp; &nbsp; axios.post(`'http://localhost:1337/testmedias/'${formData}`)&nbsp; &nbsp; &nbsp; &nbsp; .then((response) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(response);&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; }&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; handleChangefile = e => {&nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; media : e.target.files[0]&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; render() {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <form>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className='form' id='input' >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h6 className={this.state.step9? 'true': 'false'}>Ajoutez des images ?</h6>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type='file' name='media' className='input' onChange={this.handleChangefile}/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onClick={this.handleClick9} >Soumettre</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }export default FormLocation;