vue 使用fs_node.js 中的 fs 模块的使用

博客展示了在Vue中使用fs模块进行文件操作的代码示例,包括检测文件或目录、创建目录、读写文件、追加内容、重命名、移动、删除文件和文件夹等,还涉及文件流的读写、写入以及管道流操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

let fs = require('fs');

// 检测是文件还是目录

// 名字 回调函数

// fs.stat('./package.json', (err, data) => {

// if (err) { console.log(err);return;}

// console.log(`是文件:${data.isFile()}`);

// console.log(`是目录:${data.isDirectory()}`);

// })

// 创建目录

// 路径 权限(可以默认777 不填写) 回调函数

// fs.mkdir('./package', (err) => {

// if (err) {console.log(err);return;}

// console.log(`创建成功`);

// })

// 读取目录

// 路径 回调函数

// fs.readdir('./css', (err, data) => {

// if (err) {console.log(err);return;}

// console.log(data);

// })

// 写入文件 如果文件存在 会执行替换

// 路径 内容 回调函数

// fs.writeFile('./css/index3.css', '', (err) => {

// if (err) {console.log(err);return;}

// console.log(`写入成功`);

// })

// 读取文件

// 路径 回调函数

// fs.readFile('./css/index2.css', (err, data) => {

// if (err) {console.log(err);return;}

// console.log(data.toString());

// })

// 文件追加内容 如果文件存在会执行替换 如果不存在会创建文件

// 路径 内容 回调函数

// fs.appendFile('./css/index2.css', 'body{color:red;}\nh1{font-weight:600;}', (err) => {

// if (err) {console.log(err);return;}

// console.log(`追加成功`);

// })

// 重命名文件 或者 文件夹

// 路径 回调函数

// fs.rename('./css/index3.css', './css/index.css',(err) => {

// if (err) {console.log(err);return;}

// console.log(`重命名成功`);

// })

// 移动文件 或者 文件夹 可以一起重命名

// 路径 回调函数

// fs.rename('./css/index.css', './servers/index.css',(err) => {

// if (err) {console.log(err);return;}

// console.log(`移动成功`);

// })

// 删除文件

// 路径 回调函数

// fs.unlink('./css/index.css', (err) => {

// if (err) {console.log(err);return;}

// console.log(`删除文件成功`);

// })

// 删除文件夹 要先清空文件夹下的文件

// 路径 回调函数

// fs.rmdir('./css', (err) => {

// if (err) {console.log(err);return;}

// console.log(`删除文件夹成功`);

// })

// 删除文件夹 for循环删除文件 在删除文件夹

// 路径 回调函数

// fs.readdir('./css', (err, data) => {

// if (err) {console.log(err);return;}

// for (let i = 0; i < data.length; i++) {

// fs.unlink(`./css/${data[i]}`, (err) => {

// if (err) {console.log(err);return;}

// console.log(`删除文件成功`);

// })

// }

// fs.rmdir('./css', (err) => {

// if (err) {console.log(err);return;}

// console.log(`删除文件夹成功`);

// })

// console.log(data);

// })

// fs.createReadStream 从文件流中读取数据

// let fileReadStream = fs.createReadStream('data.json')

// let count=0;

// let str='';

// fileReadStream.on('data', (chunk) => {

// console.log(`${++count} 接收到:${chunk.length}`);

// str += chunk

// });

// fileReadStream.on('end', () => {

// console.log('--- 结束 ---');

// console.log(count);

// console.log(str);

// });

// fileReadStream.on('error', (error) => {

// console.log(error)

// });

// fs.createWriteStream 写入文件

// let data = '我是从数据库获取的数据,我要保存起来'; // 创建一个可以写入的流,写入到文件 output.txt 中

// let writerStream = fs.createWriteStream('output.txt'); // 使用 utf8 编码写入数据

// writerStream.write(data,'UTF8'); // 标记文件末尾

// writerStream.end(); // 处理流事件 --> finish 事件

// writerStream.on('finish', () => { /*finish - 所有数据已被写入到底层系统时触发。*/

// console.log('写入完成');

// })

// writerStream.on('error', function(err) {

// console.log(err.stack);

// });

// console.log('程序执行完毕');

// 管道流

// 创建一个可读流

// 管道提供了一个输出流到输入流的机制。通常我们用于从一个流中获取数据并将数据传 递到另外一个流中。

// 如上面的图片所示,我们把文件比作装水的桶,而水就是文件里的内容,我们用一根管子(pipe)连接两个桶使得水从一个 桶流入另一个桶,这样就慢慢的实现了大文件的复制过程。

// 我们通过读取一个文件内容并将内容写入到另外一个文件中。

// let readerStream = fs.createReadStream('input.txt'); // 创建一个可写流

// let writerStream = fs.createWriteStream('output.txt'); // 管道读写操作

// // 读取 input.txt 文件内容,并将内容写入到 output.txt 文件中

// readerStream.pipe(writerStream);

// console.log("程序执行完毕");

Vue.js (版本2) 中,Node.js 的 `fs` 模块主要用于文件系统操作,如读取、写入、删除文件等。要在 Vue 组件中使用它,你需要在 Node 环境下编写服务端代码(通常用 Express 或其他框架),而不是直接在浏览器中。 以下是一个简单的步骤: 1. **引入 fs 模块**: 在你的 Node.js 服务器端代码(例如一个 `.js` 文件)里,首先导入 `fs` 模块: ```javascript const fs = require('fs'); ``` 2. **读取文件**: 使用 `fs.readFile()` 或 `fs.promises.readFile()` 来读取文件内容,这在服务器启动时或需要预加载数据时很有用: ```javascript const readFile = async (filePath) => { try { const data = await fs.promises.readFile(filePath, 'utf8'); // 以 utf8 编码读取 return data; } catch (err) { console.error(`Error reading file: ${err}`); } }; ``` 3. **写入文件**: 可以用 `fs.writeFile()` 或 `fs.promises.writeFile()` 来保存数据到文件: ```javascript const writeFile = async (filePath, content) => { try { await fs.promises.writeFile(filePath, content, 'utf8'); console.log('File saved successfully'); } catch (err) { console.error(`Error writing to file: ${err}`); } }; ``` 4. **Vue 组件中的调用**: 如果你有一个 Vue 面向服务端的组件,可以在 mounted 或生命周期钩子里调用上述函数,比如通过 Axios 发送 HTTP 请求到 Node 服务器来处理文件操作。 ```javascript export default { data() { return { filePath: '/path/to/file', }; }, created() { this.readFile(); }, methods: { readFile() { this.$axios.post('/read-file', { filePath: this.filePath }).then(response => { // response.data 包含文件内容 }); }, writeFile(newContent) { this.$axios.post('/write-file', { filePath: this.filePath, content: newContent }).then(() => { console.log('File written'); }); }, }, }; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值