JavaScript文件上传与读取教程

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《JavaScript文件上传与读取方法详解》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

JavaScript无法直接访问本地文件系统，上传必须通过<input type="file">触发用户选择，再用FileReader读取或fetch+FormData上传；大文件需分片处理，后端负责合并与校验。

JavaScript 本身不能直接访问本地文件系统，所以所谓“上传”必须通过 <input type="file"> 触发用户主动选择，再用 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 规范的请求体。

容易踩的坑：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 控制不了，但前端必须和后端对齐协议。

理论要掌握，实操不能落！以上关于《JavaScript文件上传与读取教程》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！