操作文件好像一直是后台服务要干的事,但其实前端也可以在一定程度上来操作文件。
访问文件
以下代码允许用户在文件选择器中选择一个文件。
JavaScript
async function getFile() {
// 打开文件选择器并从结果中解构出第一个句柄
const [fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
return file;
}
下面的异步函数可以显示一个文件选择器,并在选择了文件时使用 getFile()
方法取得内容。
JavaScript
const pickerOpts = {
types: [
{
description: "Images",
accept: {
"image/*": [".png", ".gif", ".jpeg", ".jpg"],
},
},
],
excludeAcceptAllOption: true,
multiple: false,
};
async function getTheFile() {
// 打开文件选择器并从结果中解构出第一个句柄
const [fileHandle] = await window.showOpenFilePicker(pickerOpts);
// 获取文件内容
const fileData = await fileHandle.getFile();
}
访问目录
下面的示例能够取得指定名称的目录的句柄,如果目录不存在,则创建。
JavaScript
const dirName = "directoryToGetName";
// 假设我们已经有一个目录句柄:'currentDirHandle'
const subDir = currentDirHandle.getDirectoryHandle(dirName, { create: true });
下面的异步函数使用 resolve()
来查找被选择文件相对于指定目录句柄的路径。
JavaScript
async function returnPathDirectories(directoryHandle) {
// 通过显示文件选择器来获得一个文件句柄
const [handle] = await self.showOpenFilePicker();
if (!handle) {
// 如果用户取消了选择或者打开文件失败
return;
}
// 检查文件句柄是否存在于目录句柄的目录中
const relativePaths = await directoryHandle.resolve(handle);
if (relativePaths === null) {
// 不在目录句柄中
} else {
// relativePaths 是一个包含名称的数组,指示相对路径
for (const name of relativePaths) {
// 打印数组的每个元素
console.log(name);
}
}
}
写入文件
以下异步函数能够打开一个文件选择器,并在选择了文件时返回一个 FileSystemFileHandle
。然后使用 FileSystemFileHandle.createWritable()
方法创建一个写入流。
然后将用户定义的一个 Blob
写入流中,随后关闭该流。
javascript
async function saveFile() {
// 创建一个新句柄
const newHandle = await window.showSaveFilePicker();
// 创建一个 FileSystemWritableFileStream 用于写入
const writableStream = await newHandle.createWritable();
// 写入我们的文件
await writableStream.write(imgBlob);
// 关闭文件并将内容写入到磁盘
await writableStream.close();
}
下面的示例展示能够向 write()
方法传递的不同选项。
javascript
// 只传递数据(没有选项)
writableStream.write(data);
// 向流中指定位置写入数据
writableStream.write({ type: "write", position, data });
// 将文件当前的指针更新到指定的偏移位置
writableStream.write({ type: "seek", position });
// 裁切文件的字节长度为 size 变量的大小
writableStream.write({ type: "truncate", size });