前端操作文件

操作文件好像一直是后台服务要干的事,但其实前端也可以在一定程度上来操作文件。

访问文件

以下代码允许用户在文件选择器中选择一个文件。

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 });
相关推荐
Never_Satisfied1 小时前
在JavaScript / HTML中,line-height是一个CSS属性
javascript·css·html
用户916357440952 小时前
LeetCode热题100——15.三数之和
javascript·算法
skykun2 小时前
都2026年了还在说闭包吗?
javascript
饮水机战神2 小时前
小程序被下架后,我连夜加了个 "安全接口"
前端·javascript
柯南二号2 小时前
【大前端】 TypeScript vs JavaScript:全面对比与实践指南
前端·javascript·typescript
Larry_Yanan2 小时前
QML学习笔记(三十一)QML的Flow定位器
java·前端·javascript·笔记·qt·学习·ui
拉不动的猪3 小时前
从底层逻辑和实用性来分析ref中的值为什么不能直接引用
前端·javascript·面试
enki08153 小时前
【CANN训练营】+开源之星+GitCode算子开发环境快速搭建手册
javascript·ecmascript·jquery
通往曙光的路上3 小时前
vue啊哈哈哈哈哈哈哈哈
前端·javascript·vue.js
进阶的鱼3 小时前
React+ts+vite脚手架搭建(四)【mock篇】
前端·javascript·react.js