react 如何读取文件上传
读取文件上传的方法
在React中读取上传的文件通常通过<input type="file">元素结合事件处理实现。以下是几种常见方法：
使用原生JavaScript File API
通过onChange事件获取文件对象，利用FileReader读取内容：
function FileUpload() {
const handleFileChange = (e) => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (e) => {
console.log(e.target.result); // 文件内容
};
reader.readAsText(file); // 或 readAsDataURL/readAsArrayBuffer
};
return <input type="file" onChange={handleFileChange} />;
}使用第三方库（如react-dropzone）
对于拖拽上传等复杂场景，可以使用专门库简化操作：
import { useDropzone } from 'react-dropzone';
function DropzoneUpload() {
const { getRootProps, getInputProps } = useDropzone({
onDrop: (acceptedFiles) => {
acceptedFiles.forEach(file => {
const reader = new FileReader();
reader.onload = () => {
console.log(reader.result);
};
reader.readAsDataURL(file);
});
}
});
return (
<div {...getRootProps()}>
<input {...getInputProps()} />
<p>拖拽文件到此处或点击选择</p>
</div>
);
}处理二进制文件（如图片预览）
通过readAsDataURL实现图片预览功能：
function ImagePreview() {
const [preview, setPreview] = useState();
const handleImageChange = (e) => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = () => setPreview(reader.result);
reader.readAsDataURL(file);
};
return (
<div>
<input type="file" accept="image/*" onChange={handleImageChange} />
{preview && <img src={preview} alt="预览" width="200" />}
</div>
);
}注意事项
- 大文件处理应考虑分片上传或流式读取
- 敏感文件内容避免直接存储在state中
- 不同浏览器对文件类型限制可能不同，需做好兼容处理
