JavaScript无法直接访问本地文件系统，上传必须通过触发用户选择，再用FileReader读取或fetch+FormData上传；大文件需分片处理，后端负责合并与校验。
JavaScript 本身不能直接访问本地文件系统，所以所谓“上传”必须通过 触发用户主动选择，再用 FileReader 或 fetch 配合后端接口完成——没有后端，文件就只停留在浏览器内存里。
用 FileReader 读取文件内容（文本/二进制）
这是最常用的前端读取方式，适用于小到中等体积文件（
常见错误：直接读 event.target.files[0] 的 content 属性（不存在）；或在 onload 外访问 reader.result（还没加载完）。
-
readAsText(file, encoding)：适合.txt、.json、.csv等纯文本，第二参数默认"UTF-8" -
readAsDataURL(file)：返回 base64 字符串，适合预览图片，但体积膨胀 ~33%，别用于大图 -
readAsArrayBuffer(file)：适合后续做二进制处理（如解析 Excel、音频头信息），需配合Uint8Array或TextDecoder
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = () => {
console.log(reader.result); // 文本内容或 base64 字符串
};
reader.onerror = () => {
console.error('读取失败:', reader.error);
};
reader.readAsText(file);
});
用 fetch + FormData 实现真正上传
读取只是第一步，上传必须把文件交给服务器。这里不能传原始字符串或 base64，而要用 FormData 构造符合 multipart/form-data 规范的请求体。
立即学习“Java免费学习笔记（深入）”；
容易踩的坑：fetch 默认不带 cookie，登录态丢失；没设 Content-Type 却手动设置了——FormData 会自动生成带 boundary 的 header，手动设反而会出错。
- 后端接口必须支持
multipart/form-data解析（如 Express 需multer，Python Flask 需request.files） -
FormData.append('file', file)中第一个参数是字段名，要和后端约定一致（常见为file或upload） - 可追加其他字段：
formData.append('name', 'report.pdf')，后端能一并接收
const uploadFile = async (file) => {
const formData = new FormData();
formData.append('file', file);
try {
const res = await fetch('/api/upload', {
method: 'POST',
body: formData,
// 不要加 headers: { 'Content-Type': '...'' }
});
const data = await res.json();
console.log('上传成功:', data);
} catch (err) {
console.error('上传失败:', err);
}
};
大文件分片上传（避免内存爆、断点续传）
超过 50MB 的文件，FileReader 读全量 ArrayBuffer 会卡死页面，且失败就得重传全部。分片是实际生产中的标准做法。
核心逻辑：用 file.slice(start, end) 切块 → 每块单独 fetch → 后端按序合并。关键不在前端切，而在如何标识分片顺序和校验完整性。
- 每片请求需携带元数据：
filename、chunkIndex、totalChunks、hash（可选，防损坏） - 前端需记录已上传分片，失败时跳过已传过的片，实现“续传”
- 最后一片上传后，后端触发合并操作（不要前端拼接，太慢且不可靠）
注意：file.slice() 返回新 Blob，不是字符串切片；不同浏览器对 slice 参数支持一致，但 IE10+ 才有，现代项目可放心用。
真正难的从来不是怎么读或怎么发，而是后端怎么存、怎么防重名、怎么校验类型（别只信 file.type）、怎么清理临时分片——这些 JS 控制不了，但前端必须和后端对齐协议。
