javascript - 通过文件提交 react 表单

Question

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

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);
    }

然后你需要在方法中获取文件信息