17370845950

JavaScript需用FileReader处理文件（如预览、校验），用FormData+fetch上传；File对象通过input[type="file"]的change事件获取，继承Blob，含name/size/type属性；FileReader读取异步，须监听load事件；上传时勿设Content-Type头。

JavaScript 本身不能直接把文件“上传到服务器”——它需要配合 FormData 和 fetch（或 XMLHttpRequest）完成上传；而读取和处理文件（比如预览图片、解析 CSV、校验大小/类型）则完全可以在前端用 FileReader 或 Blob API 完成，无需发请求。

如何用 input[type="file"] 拿到用户选中的文件

关键不是“获取路径”，而是拿到 File 对象——它继承自 Blob，有 name、size、type 等只读属性，且可直接用于上传或读取。

• 必须监听 change 事件，而不是 click：用户点击后选择文件才会触发
• event.target.files 是 FileList（类数组），即使 multiple 未设，也得用 [0] 取第一个
• 如果用户取消选择或清空输入框，files.length 会是 0，需做空值判断

const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
  if (e.target.files.length === 0) return;
  const file = e.target.files[0];
  console.log(file.name, file.size, file.type); // 如：photo.jpg, 245678, image/jpeg
});

如何用 FileReader 同步读取文件内容（不上传）

FileReader 是唯一能将 File 转为文本、Data URL 或 ArrayBuffer 的浏览器 API。注意：所有读取方法都是异步的，不能“同步返回结果”。

• readAsText(file, encoding)：适合读取 .txt、.json、.csv 等文本文件，encoding 默认 UTF-8
• readAsDataURL(file)：适合图片/音视频预览，返回 base64 字符串，但大文件会导致内存暴涨，慎用
• readAsArrayBuffer(file)：适合二进制处理（如解析 Excel、校验哈希、压缩），后续需用 Uint8Array 操作
• 必须监听 load 事件才能拿到结果：reader.result 是最终数据

const reader = new FileReader();
reader.onload = () => {
  const text = reader.result; // string
  console.log(text.substring(0, 100)); // 前100字符
};
reader.readAsText(file, 'UTF-8');

如何用 FormData + fetch 实现真正上传

上传本质是构造一个 multipart/form-data 请求体。直接传 File 对象给 FormData.append() 即可，浏览器自动设置 boundary 和 Content-Type。

• 不要手动设置 Content-Type 请求头：否则会破坏 multipart 格式，导致后端收不到文件
• 后端接收字段名（如 avatar）必须和 FormData.append('avatar', file) 第一个参数一致
• 如需额外参数（如用户 ID），也用 append() 加入，不要塞进 URL 或 headers
• 上传大文件时建议监听 upload.onprogress，但 fetch 不支持原生进度，得用 XMLHttpRequest 或第三方库

const formData = new FormData();
formData.append('avatar', file);        // 文件字段
formData.append('user_id', '123');      // 普通字段

fetch('/api/upload', {
  method: 'POST',
  body: formData // 不要加 headers: { 'Content-Type': ... }
})
.then(r => r.json())
.then(data => console.log('上传成功', data));

常见错误和边界情况

很多上传失败不是代码写错，而是忽略了浏览器或用户行为的限制：

• 本地双击 HTML 文件打开时，file:// 协议下部分浏览器禁止 FileReader 读取（报 SecurityError），必须起本地服务（如 npx serve）
• file.type 不可靠：用户可改后缀或伪造 MIME，必须后端二次校验；前端仅作快速过滤（如 if (!file.type.startsWith('image/'))）
• 大文件（>100MB）在读取时可能卡死 UI，应使用 slice() 分块读取，或用 Stream + ReadableStream（较新 API）
• 移动端 input[type="file"] 在 iOS 上不支持 capture="camera" 以外的摄像头调用，且部分安卓机型对 accept 属性支持不一

真正的难点不在“怎么传”，而在“传之前校验是否合理”和“传之后如何反馈状态”。比如拖拽区域、分片上传、断点续传、秒传，这些都建立在对 File 和 Blob 的扎实理解之上。