Question

我现在正在练习使用Reactjs上传文件。这是一个简单的问题，但我无法将解决方案连接到axios。我知道state和Form的工作原理，但我的JavaScript回调值不包含任何给定的输入。或者我找不到我的values。这是我的情况。

import React, {Component, Fragment} from 'react';
import tokamakConfig from './Configuration_icon_by_obsilion.png';
import {Form} from 'semantic-ui-react';

class Advance extends Component {
  handleSubmit(event, values){
    console.log(event);
    console.log(values);
  }

  render() {
    return (
      <Fragment>
        <h1>Please provide necessary information for the operation</h1>
        <img src={tokamakConfig} alt={'tokamak configuration'} />
        <Form onSubmit={this.handleSubmit}>
          <Form.Group inline>
            <label>Load input file</label>
            <input name={'file'} type='file' />
          </Form.Group>

          <Form.Group inline>
            <label>Comment</label>
            <input name={'comment'} type={'text'} placeholder={'This is an advanced mode'}/>
          </Form.Group>
          <button type={'submit'}>Submit</button>
        </Form>
      </Fragment>
    )
  }
}

export default Advance;

在我的console.log()中。我得到了proxy个对象和onSubmit个对象。我在那里找不到任何输入。然后我不知道如何将我的价值发送给axios

问题：
如何POST从form提交到endpoint

Answer 1

<input type="file" onChange={ (e) => this.handleChange(e.target.files) } />

您需要使用onChange事件来获取文件数据。

handleChange(selectorFiles: FileList)
    {
        console.log(selectorFiles);
    }

然后你需要在方法

中获取文件信息

React Form with file submission

1 个答案: