在ReactJS的表單中上傳2個文件

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-Ipad上的拼寫錯誤，抱歉，如果很難閱讀但很難輸入😂