使用File System Access API访问文件

最新的File System Access API可以访问文件系统,完成文件的读取和保存。
使用window.showOpenFilePicker获取fileHandle,完成文件的读取。
const [fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const content = await file.arrayBuffer();
const blob = new Blob([content], { type: 'image/png' });
const img = document.createElement('img');

document.body.appendChild(img);
img.src = URL.createObjectURL(blob);
使用window.showSaveFilePicker获取handle,完成文件的保存。
const handle = await window.showSaveFilePicker({
  types: [{
    description: 'Test files',
    accept: {
      'image/png': ['.png']
    }
  }]
});
const writable = await handle.createWritable();

await writable.write(content);
await writable.close();
这个Demo展示了如何加载图片和保存图片。