Блог

Я очень стараюсь отправить изображение пользователя вместе с другими данными в моем приложении React. Вот форма

 
 <div className="form-container">
        <Form onSubmit={this.onSubmit}>
        <Row>     
          <Col>
            <FormGroup>
              <label></label>
              <Input
                placeholder='employee name'
                type='Text'
                value={this.state.employeeName}
                name='employeeName'
                onChange={this.onChange}
              />
            </FormGroup>
          </Col>
<Col>
            <FormGroup>
              <label></label>
              <Input
                placeholder='City of residence'
                type='text'
                value={this.state.origin}
                name='origin'
                onChange={this.onChange}
              />
            </FormGroup>
          </Col>
                   <Col>
          
                    <input
  name="images"
  type="file"
  onChange= {this.onChangeImage}
/>
            </Col>
          </Row>
          <Row>
            <Col>
            <Button variant='info' type='submit'>
                                            Add
                                        </Button>
            </Col>
  
          </Row>
        
                  
          </Form>
</div>
 

и вот состояние приложения, функция onChange как для файла, так и для других данных

 
state = {
      employeeName: "",
      origin: "",
      image:'',
    
    };
   
   
  }

  onChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });

   onChangeImage = e => {
        this.setState({ image: e.target.files[0] });
        };

  };

 

И, наконец, onSubmit

 onSubmit = (e) => {
    const { user } = this.props.auth;
    const id=user.id
    e.preventDefault();
    console.log(user)

    let formData = new FormData();
    formData.append('image', this.state.image);

    const { employeeName, origin } = this.state;
    const employee = {employeeName, origin};

    axios.post('/api/v1/employee/'   id, employee,formData)
    .then(
      (res) => {
        alert('Submitted successfully!');
        var clearState = {
          employeeName: "",
          origin: "",
          image: '',
        };
        this.setState( clearState );
      },
      (err) => {
        alert('An error occured! Try submitting the form again.', err);
      }
    );
  }
 

Мой серверный интерфейс (кратко) выглядит так:

  console.log(  req.file );
  // If File not found
            if( req.file === undefined ){
                console.log( 'Error: No File Selected!' );
                res.json( 'Error: No File Selected' );
            } else { */ process request and save/*}

 

к сожалению, я продолжаю получать

 undefined
[0] Error: No File Selected!
[0] POST /api/v1/employee/5fb3f9a83c98235ff83300de 200 8.729 ms - 25
 

Как мне решить эту проблему, я, очевидно, где-то ошибаюсь

Сначала вы должны распечатать запрос, посмотреть, не связана ли проблема с клиентом (неправильная отправка FormData или что-то в этом роде), а затем сосредоточиться на ответе.

Дамп запроса был бы полезен для решения этого вопроса. Кроме того, сотрудник также должен быть в FormData.

Документы Axios Form Data