react实现文件上传
时间: 2023-11-15 22:58:03 浏览: 48
React 可以通过 `input` 标签的 `type=file` 属性实现文件上传。以下是一个简单的示例:
```jsx
import React, { useState } from "react";
function FileUpload() {
const [file, setFile] = useState(null);
const handleFileChange = (event) => {
setFile(event.target.files[0]);
};
const handleSubmit = (event) => {
event.preventDefault();
// 处理上传逻辑
console.log(file);
};
return (
<form onSubmit={handleSubmit}>
<label htmlFor="file">选择文件:</label>
<input type="file" id="file" onChange={handleFileChange} />
<button type="submit">上传</button>
</form>
);
}
export default FileUpload;
```
在上面的示例中,我们使用了 `useState` Hook 来保存用户选择的文件。当用户选择文件时,`handleFileChange` 函数会更新 `file` 状态。当用户点击“上传”按钮时,`handleSubmit` 函数会处理上传逻辑,可以将 `file` 作为参数传递给后端API。
需要注意的是,在 React 中使用表单,需要使用 `event.preventDefault()` 来阻止默认的表单提交行为。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)