Загрузить 2 файла в форме в ReactJS

Question

Я получаю 3 ошибки:

1.

 VM1307:3 Uncaught TypeError: Cannot read property '_avast_submit' of undefined
    at <anonymous>:3:28
    at <anonymous>:32:19

2.

POST http://127.0.0.1:8000/api/materials 422 (Unprocessable Entity)

3.

createError.js:16 Uncaught (in promise) Error: Request failed with status code 422
at createError (createError.js:16)
at settle (settle.js:18)
at XMLHttpRequest.handleLoad (xhr.js:77)

Этокак выглядит моя веб-страница

и это мой код:

import React, { Component } from 'react';
import axios from 'axios';
import { Form,  TextArea, Button, Grid, Segment, Header } from 'semantic-ui-react'

class UploadScreen extends Component {
    constructor(){
        super();
        this.state={
          title:'',
          tags:'',
          description: '',
          viewing_time: '',
          file: null,
          preview: null,
          url: '',
          errors: {}
        }
       }

    fileChangedHandler = (event) => {
        this.setState({file: event.target.files[0]})
    }

    previewChangedHandler = (event) => {
        this.setState({preview: event.target.files[0]})
    }

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

    onSubmit = (e) => {
        const formData = new FormData()
        formData.append('file', this.state.file, this.state.file.name)
        const previewData = new FormData()
        previewData.append('preview', this.state.preview, this.state.preview.name)

        var token = localStorage.getItem('jwt');
        var apiBaseUrl = "http://127.0.0.1:8000/api/materials";
        var payload={
            "title":this.state.title,
            "tags":this.state.tags,
            "description":this.state.description,
            "viewing_time":this.state.viewing_time,
            "url":this.state.url
        }
        var config = {
          headers: {
            'Authorization': "bearer " + token,
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          withCredentials: false
        }

        axios.post(apiBaseUrl, payload, formData, previewData, config)
        .then(function (response) {
          console.log(response);
          if(response.status == 200){
              console.log("success");
          }
          else if(response.status == 204){
              console.log("nope");
          }
          else{
              console.log("nope nope");
          }
      })
      }

    render() {
        const { title, tags, description, viewing_time, file, preview, url, errors } = this.state;
        return (
            <Grid textAlign='center' style={{ height: '100%' }} verticalAlign='middle'>
            <Grid.Column style={{ maxWidth: 1000 }}>
            <br />
            <br />
            <br />
            <Header as='h1'>Create a New Material</Header>
            <Form onSubmit={this.onSubmit}>
                <Segment stacked>
            <Header as='h2' textAlign='left'>Details</Header>
            <Form.Input
            type='text'
            name='title'
            value={title}
            onChange={this.onChange}            
            placeholder='Title' 
            fluid
            icon='pencil'
            iconPosition='left' 
            />

            <Form.Group widths='equal'>
              <Form.Input
                type='text'
                name='viewing_time'
                value={viewing_time}
                onChange={this.onChange}    
                placeholder='Viewing Time'
                fluid
                icon='clock'
                iconPosition='left'
              />
              <Form.Input
                type='text'
                name='tags'
                value={tags}
                onChange={this.onChange}                
                placeholder='Tags (multiple tags must be separated by semi-colon)'
                fluid
                icon='tags'
                iconPosition='left'
              />
            </Form.Group>
            <Form>
            <TextArea
                name='description'
                value={description}
                onChange={this.onChange}     
                autoHeight 
                placeholder='Description' 
                fluid
            />
            </Form>
            <Header as='h2' textAlign='left'>Material Upload</Header>
            <Form>
                <input type="file" class="form-control-file" id="file" name='file' onChange={this.fileChangedHandler}  aria-describedby="fileHelp" />
            <Header as='h3'>or</Header>
            <Form.Input
                name='url'
                value={url}
                onChange={this.onChange}  
                placeholder='File URL'
                fluid
                icon='world'
                iconPosition='left'
              />
            </Form>
            <Header as='h2' textAlign='left'>Material Preview</Header>
            <Form>
                <input type="file" class="form-control-file" id="preview" name='preview' onChange={this.previewChangedHandler} aria-describedby="fileHelp" />
            </Form>
            <br />
            <Button fluid size='large' type="submit">
                Create
            </Button>
            </Segment>
          </Form>
          </Grid.Column>
          </Grid>
        );
    }
}
export default UploadScreen;

Я просто использовал то, что учебники сделали с загрузкойфотографии, но это дает мне ошибки.Я хочу загрузить два разных файла, один pdf и одно изображение в запрос axios как часть формы.Что я тут не так делаю?

Answer 1

Вам нужен только один экземпляр FormData, а затем вам нужно добавить все поля (и файлы, и другие входные данные, которые вы хотите опубликовать) к этому одному экземпляру.

Затем в Axios вы просто отправляете axios ({..., data: data})

Esit - опечатки im на Ipad, извините, если трудно читать, но сложнее набрать ?