我现在正在练习使用 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
最佳答案
<input type="file" onChange={ (e) => this.handleChange(e.target.files) } />
您需要使用onChange 事件来获取文件数据。
handleChange(selectorFiles: FileList)
{
console.log(selectorFiles);
}
然后你需要在方法中获取文件信息
关于javascript - 通过文件提交 react 表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50925563/