在网页开发中，使用filereader和formdata可实现灵活的文件处理。1. filereader用于前端读取文件内容，适合图片预览、文本读取及内容校验，但不适用于大文件；2. formdata用于构建上传数据，支持多文件和附加参数，并可配合fetch或xmlhttprequest发送请求；3. 两者结合可用于先预览再上传的场景，如图片压缩、裁剪，同时支持上传前的文件类型与大小限制以及分片上传优化大文件处理。
在网页开发中，使用 HTML 和 JavaScript 实现文件上传是一个常见需求。除了传统的表单提交方式外，我们还可以借助 FileReader 和 FormData 对象来实现更灵活、异步的文件处理。下面我们就来看看它们各自的作用和用法。
1. 使用 FileReader 读取文件内容
FileReader 是浏览器提供的一个 API，用于在客户端读取用户选择的文件内容。它不会将文件发送到服务器，而是将文件内容加载到内存中，方便我们在前端预览或进行其他处理。
常见用途：
- 图片预览
- 文本文件内容读取
- 文件内容校验（比如检查 JSON 格式）
示例代码：
@@##@@
关键点说明：
-
readAsDataURL：读取为 Base64 编码字符串，适合图片等小文件 -
readAsText：读取为文本内容 -
onload回调中获取读取结果 - 不适用于大文件，容易造成内存问题
2. 使用 FormData 构建上传数据
如果你需要将文件上传到服务器，FormData 是更好的选择。它可以模拟表单数据，并支持多文件、附加参数等操作，常与 fetch 或 XMLHttpRequest 搭配使用。
立即学习“前端免费学习笔记（深入）”；
示例代码（配合 fetch）：
const fileInput = document.getElementById('fileInput');
const formData = new FormData();
formData.append('avatar', fileInput.files[0]);
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));注意事项：
- 后端接口必须能接收 multipart/form-data 格式的数据
- 可以一次添加多个字段，例如
formData.append('username', 'test') - 不需要手动设置请求头中的
Content-Type，浏览器会自动识别
3. 结合 FileReader 与 FormData 的实际场景
有时候我们会先使用 FileReader 预览或处理文件内容，再决定是否上传。这种组合非常实用，比如在上传前对图片进行压缩或裁剪。
示例流程：
- 用户选择图片
- 用
FileReader加载并显示预览 - 用户确认后，将文件加入
FormData并上传
小技巧：
- 在上传前可以限制文件类型和大小
- 可以用
canvas对图片进行缩放后再上传 - 大文件建议分片上传（涉及更复杂的逻辑）
基本上就这些。这两个对象虽然简单，但在处理文件上传时非常实用。只要理解了它们各自的用途和限制，就能灵活应对各种文件操作场景。
