如何使用JavaScript进行文件操作【教程】

javaScript在浏览器中无法直接读写本地文件系统，需通过和FileReader API读取用户选择的文件；node.js则可通过fs模块进行文件操作，且浏览器中fs未定义是因环境错误。

javascript 本身不能直接读写本地文件系统（出于安全限制），浏览器环境里没有 fs 模块；想“操作文件”，得看清楚是在浏览器还是Node.js环境——这是最关键的分水岭。

浏览器里怎么读取用户选中的文件？

浏览器只能通过用户主动选择（）来获取文件，无法随意访问硬盘。核心是 FileReader API。

• 用户点击上传按钮后，input.files 返回 FileList，每个项是 File 实例（继承自 Blob）
• 用 FileReader 的 readAsText()、readAsArrayBuffer() 等方法加载内容
• 注意：读取是异步的，必须监听 onload 或用 promise 封装，别试图同步取结果

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); // 文本内容 }; reader.readAsText(file, 'UTF-8'); });

node.js 中如何读写文件？

Node.js 有内置 fs 模块，支持同步/异步、流式、Promise 版本。默认是异步回调风格，但推荐用 fs.promises（或 import { readFile, writeFile } from 'fs/promises'）。

• fs.readFile() 和 fs.writeFile() 是最常用入口，自动处理编码（如传 'utf8' 得字符串，不传得 Buffer）
• 避免用 fs.readFileSync() 在主线程做大量文件 I/O，会阻塞事件循环
• 路径要用 path.join() 拼接，别硬写 './data/file.txt'，windows 下斜杠容易出错

import { readFile, writeFile } from 'fs/promises'; 
try { const content = await readFile('./config.json', 'utf8'); const data = JSON.parse(content); data.version = '2.1.0'; await writeFile('./config.json', JSON.stringify(data, null, 2)); } catch (err) { console.error('文件操作失败:', err.message); }

为什么 fs 在浏览器里报错 “ReferenceError: fs is not defined”？

因为浏览器根本没有 fs 模块——它不是 Web API，也不在全局作用域。这个错误说明你把 Node.js 代码直接跑在了浏览器里。

立即学习“Java免费学习笔记（深入）”；

• 检查运行环境：用 typeof window !== 'undefined' 判断是否浏览器，用 typeof process !== 'undefined' && process.versions.node 判断是否 Node.js
• 构建工具（如 vite、webpack）不会自动模拟 fs，除非配了 node-polyfill（不推荐，掩盖根本问题）
• 如果真需要浏览器端“存文件”，用 Blob + URL.createObjectURL() + 触发下载，而不是写磁盘

想在前端实现“保存配置到本地文件”，该怎么做？

浏览器不允许写入任意路径，但可以触发下载，让用户手动保存。本质是构造一个 Blob，再生成可下载链接。

• Blob 接收字符串数组或 Uint8Array，指定 { type: 'text/plain' } 等 MIME 类型
• URL.createObjectURL() 创建临时内存 URL，必须配合 revokeObjectURL() 清理，否则内存泄漏
• a.download 属性决定保存时的默认文件名（仅对同源 URL 有效）

function downloadAsJson(data, filename = 'config.json') {   const blob = new Blob([JSON.stringify(data, null, 2)], {     type: 'application/json'   });   const url = URL.createObjectURL(blob);   const a = Object.assign(document.createElement('a'), {     href: url,     download: filename   });   document.body.appendChild(a);   a.click();   document.body.removeChild(a);   URL.revokeObjectURL(url); }

关键点始终没变：浏览器无权写文件系统，所有“保存”动作都依赖用户确认；而 Node.js 虽能自由读写，但权限由进程启动者决定——别让服务端代码意外覆盖关键配置。