JavaScript 文件操作指南

🧑‍🎓 个人主页：《爱蹦跶的大A阿》

🔥当前正在更新专栏：《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》

​ 

​

✨ 前言

        本文旨在帮助您理解 JavaScript 中的文件操作，涵盖文件读取、写入、创建、删除等基本操作，以及更高级的异步操作、流式处理和错误处理等主题。

​

✨ 正文

参考资料:

• File 和 FileReader

1. 基础知识

文件对象:

JavaScript 中的文件操作通过 File 对象进行。File 对象包含有关文件的信息，例如文件名、文件大小、文件类型等。

文件路径:

文件路径用于指定文件的存储位置。JavaScript 支持多种文件路径格式，例如绝对路径、相对路径和 URL。

文件类型:

文件类型用于指定文件的 MIME 类型。MIME 类型可以帮助浏览器识别文件的内容类型。

2. 文件读取

同步读取:

同步读取文件会阻塞程序执行，直到文件读取完成。

const data = readFileSync('file.txt', 'utf-8');

异步读取:

异步读取文件不会阻塞程序执行，而是使用回调函数处理读取结果。

readFile('file.txt', 'utf-8', (err, data) => {
  if (err) {
    console.error(err);
    return;
  }
  // 处理 data
});

流式读取:

流式读取文件可以逐块读取文件内容，减少内存占用。

const fs = require('fs');

const readStream = fs.createReadStream('file.txt');

readStream.on('data', (chunk) => {
  // 处理数据块
});

readStream.on('end', () => {
  // 文件读取完成
});

3. 文件写入

同步写入:

同步写入文件会阻塞程序执行，直到文件写入完成。

writeFileSync('file.txt', 'data', 'utf-8');

异步写入:

异步写入文件不会阻塞程序执行，而是使用回调函数处理写入结果。

writeFile('file.txt', 'data', 'utf-8', (err) => {
  if (err) {
    console.error(err);
    return;
  }
  // 文件写入完成
});

流式写入:

流式写入文件可以逐块写入文件内容，提高写入效率。

const fs = require('fs');

const writeStream = fs.createWriteStream('file.txt');

writeStream.write('data');

writeStream.end(() => {
  // 文件写入完成
});

 

4. 文件创建和删除

创建文件:

可以使用 fs.writeFile() 方法创建文件。如果文件不存在，则会自动创建。

writeFile('file.txt', 'data', 'utf-8', (err) => {
  if (err) {
    console.error(err);
    return;
  }
  // 文件创建完成
});

删除文件:

可以使用 fs.unlink() 方法删除文件。

unlink('file.txt', (err) => {
  if (err) {
    console.error(err);
    return;
  }
  // 文件删除完成
});

 

5. 高级主题

异步操作:

可以使用 Promise 或 async/await 语法处理异步文件操作。

async function readFile(path) {
  const data = await readFileSync(path, 'utf-8');
  // 处理 data
}

流式处理:

可以使用 fs.createReadStream() 和 fs.createWriteStream() 方法创建文件流，并使用 data 事件监听读取到的数据块。

const fs = require('fs');

const readStream =

 

✨ 结语

File 对象继承自 Blob。

        除了 Blob 方法和属性外，File 对象还有 name 和 lastModified 属性，以及从文件系统读取的内部功能。我们通常从用户输入如 <input> 或拖放事件来获取 File 对象。

FileReader 对象可以从文件或 blob 中读取数据，可以读取为以下三种格式：

• 字符串（readAsText）。
• ArrayBuffer（readAsArrayBuffer）。
• data url，base-64 编码（readAsDataURL）。

        但是，在很多情况下，我们不必读取文件内容。就像我们处理 blob 一样，我们可以使用 URL.createObjectURL(file) 创建一个短的 url，并将其赋给 <a> 或 <img>。这样，文件便可以下载文件或者将其呈现为图像，作为 canvas 等的一部分。

        而且，如果我们要通过网络发送一个 File，那也很容易：像 XMLHttpRequest 或 fetch 等网络 API 本身就接受 File 对象。

​