JavaScript内核与高级编程之：`JavaScript` 的 `FileSystem` API：如何在浏览器中进行沙盒化的文件系统操作。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众，大家好！今天咱们来聊聊一个有点神秘，但又非常实用的东西：JavaScript 的 FileSystem API。别担心，虽然名字听起来像是在操作系统底层搞事情，但其实它非常友好，而且是在浏览器里跑的“沙盒化”文件系统。啥叫沙盒化？就是说，它不会让你直接访问硬盘上的文件，而是在浏览器里给你划出一块安全的地方，让你尽情玩耍，不用担心把系统搞崩。

一、为什么要用 FileSystem API？

可能有人会问，都 2024 年了，我们有各种云存储、本地存储方案，为啥还要用这个看起来有点古老的 FileSystem API 呢？它的价值体现在以下几个方面：

离线应用支持： 如果你的应用需要处理大量数据，并且希望用户在离线状态下也能访问和修改，FileSystem API 就可以派上大用场。比如，一个离线笔记应用，或者一个简单的离线图像编辑器。
高性能数据处理： 直接操作文件，比频繁读写 localStorage 或 IndexedDB 效率更高。特别是处理大文件的时候，优势更明显。
模拟本地文件系统： 某些场景下，你可能需要模拟一个本地文件系统的结构，例如，构建一个在线 IDE，或者一个文件管理器。
安全隔离： 浏览器提供的沙盒环境，保证了用户数据的安全，防止恶意脚本窃取或篡改数据。

二、 FileSystem API 的基本概念

要玩转 FileSystem API，我们需要先了解几个核心概念：

FileSystem： 顾名思义，这就是文件系统，是你存放文件和目录的地方。
DirectoryEntry： 代表一个目录，可以包含其他目录和文件。
FileEntry： 代表一个文件。
File： 代表一个文件对象，你可以读取它的内容，或者将数据写入它。
FileWriter： 用于将数据写入文件。
FileReader： 用于读取文件内容。

这些概念就像积木一样，可以组合起来实现各种文件操作。

三、如何获取 FileSystem 对象？

首先，我们要拿到 FileSystem 对象，才能开始后续的操作。获取 FileSystem 对象有两种方式：

webkitRequestFileSystem (旧版，不推荐)
navigator.webkitPersistentStorage.requestQuota 和 window.webkitResolveLocalFileSystemURL (推荐)

由于 webkitRequestFileSystem 已经过时，我们主要讲解第二种方式。这种方式需要先申请存储空间，然后再通过 URL 获取 FileSystem 对象。

function requestFileSystem(sizeInBytes) {
  return new Promise((resolve, reject) => {
    navigator.webkitPersistentStorage.requestQuota(sizeInBytes,
      function(grantedBytes) {
        window.webkitResolveLocalFileSystemURL("filesystem:http://localhost:8080/persistent/",  // 替换为你的域名和端口
          function(fs) {
            resolve(fs);
          },
          function(error) {
            reject(error);
          }
        );
      },
      function(error) {
        reject(error);
      }
    );
  });
}

// 使用示例
requestFileSystem(1024 * 1024 * 10) // 请求 10MB 空间
  .then(fs => {
    console.log("FileSystem 获取成功:", fs);
    // 在这里进行文件操作
  })
  .catch(error => {
    console.error("FileSystem 获取失败:", error);
  });

代码解释：

requestFileSystem(sizeInBytes)：这个函数用于请求文件系统。参数 sizeInBytes 指定了你需要的存储空间大小，单位是字节。
navigator.webkitPersistentStorage.requestQuota(sizeInBytes, successCallback, errorCallback)：这个方法用于向浏览器请求持久化存储空间。 successCallback 在请求成功时被调用，errorCallback 在请求失败时被调用。
window.webkitResolveLocalFileSystemURL(url, successCallback, errorCallback)：这个方法用于通过 URL 获取 FileSystem 对象。 url 是文件系统的 URL，successCallback 在获取成功时被调用，errorCallback 在获取失败时被调用。需要注意的是，这个URL必须是filesystem:协议开头的，并且后面跟着你的域名和端口号。
重要提示: 确保你的服务器运行在 localhost 或者 127.0.0.1 上，并且端口号与代码中的一致 (例如 8080)。否则，可能会出现跨域问题，导致 FileSystem API 无法正常工作。

四、创建目录和文件

拿到 FileSystem 对象之后，我们就可以开始创建目录和文件了。

function createDirectory(fs, path) {
  return new Promise((resolve, reject) => {
    fs.root.getDirectory(
      path,
      { create: true, exclusive: false },
      function(dirEntry) {
        resolve(dirEntry);
      },
      function(error) {
        reject(error);
      }
    );
  });
}

function createFile(fs, path) {
  return new Promise((resolve, reject) => {
    fs.root.getFile(
      path,
      { create: true, exclusive: false },
      function(fileEntry) {
        resolve(fileEntry);
      },
      function(error) {
        reject(error);
      }
    );
  });
}

// 使用示例
requestFileSystem(1024 * 1024)
  .then(fs => {
    return createDirectory(fs, "myDir");
  })
  .then(dirEntry => {
    console.log("目录创建成功:", dirEntry.fullPath);
    return createFile(dirEntry.filesystem, "myDir/myFile.txt"); //注意这里filesystem的调用
  })
  .then(fileEntry => {
    console.log("文件创建成功:", fileEntry.fullPath);
  })
  .catch(error => {
    console.error("创建失败:", error);
  });

代码解释：

createDirectory(fs, path)：这个函数用于创建目录。 fs 是 FileSystem 对象，path 是目录的路径。
fs.root.getDirectory(path, options, successCallback, errorCallback)：这个方法用于获取目录。 path 是目录的路径，options 是一个对象，可以指定是否创建目录，以及是否排他性创建。 successCallback 在获取成功时被调用，errorCallback 在获取失败时被调用。
- create: true：如果目录不存在，则创建目录。
- exclusive: false：如果目录已经存在，则不报错。如果设置为 true，则在目录存在时会报错。
createFile(fs, path)：这个函数用于创建文件。 fs 是 FileSystem 对象，path 是文件的路径。
fs.root.getFile(path, options, successCallback, errorCallback)：这个方法用于获取文件。 path 是文件的路径，options 是一个对象，可以指定是否创建文件，以及是否排他性创建。 successCallback 在获取成功时被调用，errorCallback 在获取失败时被调用。
- create: true：如果文件不存在，则创建文件。
- exclusive: false：如果文件已经存在，则不报错。如果设置为 true，则在文件存在时会报错。

五、写入文件

创建文件之后，我们就可以向文件中写入数据了。

function writeFile(fileEntry, data) {
  return new Promise((resolve, reject) => {
    fileEntry.createWriter(
      function(fileWriter) {
        fileWriter.onwriteend = function(e) {
          resolve();
        };

        fileWriter.onerror = function(e) {
          reject(e);
        };

        // 创建一个 Blob 对象，用于存储数据
        const blob = new Blob([data], { type: "text/plain" });

        fileWriter.write(blob);
      },
      function(error) {
        reject(error);
      }
    );
  });
}

// 使用示例
requestFileSystem(1024 * 1024)
  .then(fs => {
    return createFile(fs, "myFile.txt");
  })
  .then(fileEntry => {
    return writeFile(fileEntry, "Hello, FileSystem API!");
  })
  .then(() => {
    console.log("文件写入成功!");
  })
  .catch(error => {
    console.error("文件写入失败:", error);
  });

代码解释：

writeFile(fileEntry, data)：这个函数用于向文件写入数据。 fileEntry 是 FileEntry 对象，data 是要写入的数据。
fileEntry.createWriter(successCallback, errorCallback)：这个方法用于创建一个 FileWriter 对象。 successCallback 在创建成功时被调用，errorCallback 在创建失败时被调用。
fileWriter.onwriteend = function(e) { ... }：这个事件处理函数在文件写入完成时被调用。
fileWriter.onerror = function(e) { ... }：这个事件处理函数在文件写入出错时被调用。
new Blob([data], { type: "text/plain" })：创建一个 Blob 对象，用于存储数据。 data 是要存储的数据，type 是数据的 MIME 类型。
fileWriter.write(blob)：将 Blob 对象写入文件。

六、读取文件

写入文件之后，我们就可以从文件中读取数据了。

function readFile(fileEntry) {
  return new Promise((resolve, reject) => {
    fileEntry.file(
      function(file) {
        const reader = new FileReader();

        reader.onloadend = function(e) {
          resolve(reader.result);
        };

        reader.onerror = function(e) {
          reject(e);
        };

        reader.readAsText(file);
      },
      function(error) {
        reject(error);
      }
    );
  });
}

// 使用示例
requestFileSystem(1024 * 1024)
  .then(fs => {
    return createFile(fs, "myFile.txt");
  })
  .then(fileEntry => {
    return writeFile(fileEntry, "Hello, FileSystem API!");
  })
  .then(() => {
    return createFile(fs, "anotherFile.txt");
  })
  .then(fileEntry =>{
    return writeFile(fileEntry,"I am a new file.")
  })
  .then(() => {
    return createFile(fs, "myFile.txt"); // 确保文件存在
  })
  .then(fileEntry => {
    return readFile(fileEntry);
  })
  .then(data => {
    console.log("文件内容:", data);
  })
  .catch(error => {
    console.error("文件读取失败:", error);
  });

代码解释：

readFile(fileEntry)：这个函数用于从文件读取数据。 fileEntry 是 FileEntry 对象.
fileEntry.file(successCallback, errorCallback): 获取一个File对象， successCallback 在获取成功时被调用，errorCallback 在获取失败时被调用。
new FileReader()：创建一个 FileReader 对象。
reader.onloadend = function(e) { ... }：这个事件处理函数在文件读取完成时被调用。
reader.onerror = function(e) { ... }：这个事件处理函数在文件读取出错时被调用。
reader.readAsText(file)：将文件读取为文本。

七、删除文件和目录

除了创建、写入和读取，我们还可以删除文件和目录。

function deleteFile(fileEntry) {
  return new Promise((resolve, reject) => {
    fileEntry.remove(
      function() {
        resolve();
      },
      function(error) {
        reject(error);
      }
    );
  });
}

function deleteDirectory(dirEntry) {
  return new Promise((resolve, reject) => {
    dirEntry.removeRecursively(
      function() {
        resolve();
      },
      function(error) {
        reject(error);
      }
    );
  });
}

// 使用示例
requestFileSystem(1024 * 1024)
  .then(fs => {
    return createFile(fs, "myFile.txt");
  })
  .then(fileEntry => {
    return deleteFile(fileEntry);
  })
  .then(() => {
    console.log("文件删除成功!");
  })
  .catch(error => {
    console.error("文件删除失败:", error);
  });

代码解释：

deleteFile(fileEntry)：这个函数用于删除文件。 fileEntry 是 FileEntry 对象。
fileEntry.remove(successCallback, errorCallback)：这个方法用于删除文件。 successCallback 在删除成功时被调用，errorCallback 在删除失败时被调用。
deleteDirectory(dirEntry)：这个函数用于删除目录。 dirEntry 是 DirectoryEntry 对象。
dirEntry.removeRecursively(successCallback, errorCallback)：这个方法用于删除目录及其所有子目录和文件。 successCallback 在删除成功时被调用，errorCallback 在删除失败时被调用。注意，是 Recursively ，递归删除。

八、错误处理

在使用 FileSystem API 时，可能会遇到各种错误。我们需要了解常见的错误类型，并进行适当的处理。

常见的错误码：

错误码	描述
`NotFoundError`	文件或目录不存在。
`SecurityError`	安全错误，例如，跨域访问。
`QuotaExceededError`	超出存储空间限制。
`TypeMismatchError`	类型不匹配，例如，试图将文件作为目录访问。
`InvalidStateError`	无效状态错误，例如，在 FileWriter 未准备好时调用 write 方法。
`InvalidModificationError`	尝试修改文件或目录时出错，例如，尝试删除一个非空目录，或者尝试写入一个只读文件。

在错误处理函数中，我们可以通过 error.code 属性来判断错误的类型，并采取相应的措施。

九、注意事项和最佳实践

兼容性： FileSystem API 的兼容性不是很好。现代浏览器（Chrome，Edge等）支持得比较好，但是老旧浏览器可能不支持。使用前最好做一下特性检测。
存储空间： 浏览器分配给 FileSystem API 的存储空间是有限制的。如果超出限制，会导致 QuotaExceededError 错误。你可以通过 navigator.webkitPersistentStorage.queryUsageAndQuota 方法来查询已用空间和可用空间。
异步操作： FileSystem API 的所有操作都是异步的，需要使用回调函数或 Promise 来处理结果。
安全性： 浏览器提供的沙盒环境，保证了用户数据的安全。但是，仍然需要注意防止 XSS 攻击，避免将用户输入直接写入文件。
文件大小限制： 浏览器对单个文件的大小也有限制，具体限制取决于浏览器和操作系统。如果需要处理大文件，可以考虑使用分片上传/下载技术。
调试： 在 Chrome 浏览器中，你可以通过 chrome://inspect/#devices 来查看 FileSystem API 的内容。

十、总结

FileSystem API 是一个强大的工具，可以让我们在浏览器中进行沙盒化的文件系统操作。虽然它的兼容性不是很好，但是如果你的应用需要离线支持、高性能数据处理或者模拟本地文件系统，那么它仍然是一个不错的选择。

希望今天的讲解对大家有所帮助！下次再见！

发表回复 取消回复

发表回复取消回复