react实现input文件上传
时间: 2023-08-15 19:33:41 浏览: 55
可以使用react中的`<input type="file" />`元素来实现文件上传,具体实现步骤如下:
1. 在React组件中定义一个state用于存储上传的文件:
```
class FileUpload extends React.Component {
state = {
selectedFile: null
}
...
}
```
2. 在render函数中添加一个文件选择框:
```
render() {
return (
<div>
<input type="file" onChange={this.fileSelectedHandler} />
...
</div>
);
}
```
3. 创建一个`fileSelectedHandler`函数来处理文件选择事件,并将选择的文件存储在组件的状态中:
```
fileSelectedHandler = event => {
this.setState({
selectedFile: event.target.files[0]
});
}
```
4. 在提交表单的时候,将选定的文件上传到服务器。这里可以使用`axios`库来发送POST请求:
```
fileUploadHandler = () => {
const formData = new FormData();
formData.append('file', this.state.selectedFile);
axios.post('/upload', formData)
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
}
```
完整的组件代码如下:
```
import React from 'react';
import axios from 'axios';
class FileUpload extends React.Component {
state = {
selectedFile: null
}
fileSelectedHandler = event => {
this.setState({
selectedFile: event.target.files[0]
});
}
fileUploadHandler = () => {
const formData = new FormData();
formData.append('file', this.state.selectedFile);
axios.post('/upload', formData)
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
}
render() {
return (
<div>
<input type="file" onChange={this.fileSelectedHandler} />
<button onClick={this.fileUploadHandler}>Upload</button>
</div>
);
}
}
export default FileUpload;
```