react 如何读取文件上传
读取文件上传的方法
在 React 中读取文件上传可以通过多种方式实现，以下是几种常见的方法：
使用 input 标签和 FileReader API
创建一个文件上传的 input 标签，并监听 onChange 事件，使用 FileReader API 读取文件内容。
import React, { useState } from 'react';
function FileUpload() {
const [fileContent, setFileContent] = useState('');
const handleFileChange = (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
setFileContent(e.target.result);
};
reader.readAsText(file);
}
};
return (
<div>
<input type="file" onChange={handleFileChange} />
<div>
<pre>{fileContent}</pre>
</div>
</div>
);
}
export default FileUpload;使用第三方库（如 react-dropzone）
react-dropzone 是一个流行的库，用于处理文件拖放和上传。
import React, { useState } from 'react';
import { useDropzone } from 'react-dropzone';
function FileUpload() {
const [fileContent, setFileContent] = useState('');
const onDrop = (acceptedFiles) => {
const file = acceptedFiles[0];
const reader = new FileReader();
reader.onload = () => {
setFileContent(reader.result);
};
reader.readAsText(file);
};
const { getRootProps, getInputProps } = useDropzone({ onDrop });
return (
<div {...getRootProps()}>
<input {...getInputProps()} />
<p>拖放文件到此处，或点击选择文件</p>
<div>
<pre>{fileContent}</pre>
</div>
</div>
);
}
export default FileUpload;处理二进制文件（如图片）
如果需要读取图片或其他二进制文件，可以使用 URL.createObjectURL 生成临时 URL。
import React, { useState } from 'react';
function ImageUpload() {
const [imageUrl, setImageUrl] = useState('');
const handleImageChange = (event) => {
const file = event.target.files[0];
if (file) {
const url = URL.createObjectURL(file);
setImageUrl(url);
}
};
return (
<div>
<input type="file" accept="image/*" onChange={handleImageChange} />
{imageUrl && <img src={imageUrl} alt="Uploaded" style={{ maxWidth: '100%' }} />}
</div>
);
}
export default ImageUpload;注意事项
- 文件大小限制：大文件可能导致性能问题，建议添加文件大小检查。
- 文件类型限制：通过
accept属性限制上传文件的类型。 - 清理临时 URL：使用
URL.revokeObjectURL清理生成的临时 URL，避免内存泄漏。
