如何使用现代 FileApi 在本地 fs 中创建文件？

Question

我有这个代码：

document.querySelector('#myfile').onchange = function(e) {
  var files = this.files;
  window.requestFileSystem(window.TEMPORARY, 1024 * 1024, function(fs) {
    let file = files[0];
    let nem_file_name = file.name + '_copy';
    fs.root.getFile(nem_file_name, {
      create: true,
      exclusive: true
    }, function(fileEntry) {
      fileEntry.createWriter(fileWriter => {
        fileWriter.write(file);
      }, () => alert('error 1'));
    }, err => alert('error 2 ' + err));
  }, () => alert('error 3'));
};

<input type="file" id="myfile" ref="myfile" multiple />

我想在使用输入控件 select 时创建文件的副本。我的代码有什么问题？我没有错误，也没有任何反应

Answer 1

documentation 声明此方法是非标准的，仅在 Chrome 中并且已弃用：

Even compared to the rest of the File and Directory Entries API, requestFileSystem() is especially non-standard; only Chrome implements it, and all other browser makers have decided that they will not implement it. It has even been removed from the proposed specification. Do not use this method!

你不应该使用这个。

Answer 2

“modern”API被称为File System Access，它仍然只是一个提议，但有望取代之前的并被弃用文件系统API，并且已经在 Chromium 浏览器中可用。

要使用此 API 写入文件，您首先使用 showSaveFilePicker() 方法请求一个 FileHandle，然后您可以从该句柄创建一个写入器并使用该写入器附加数据：

onclick = async (e) => { // needs to be initiated by an user gesture
  const handle = await showSaveFilePicker(); // prompt "Save As"
  const writer = await handle.createWritable(); // request writable stream
  await writer.write( new Blob( [ "some data" ] ) ); // write the Blob directly
  writer.close(); // end writing
};

但是这个 API 仍然受到过度保护，所以不幸的是它不能运行在跨源 iframe 中，就像 StackSnippet 或最流行的摆弄服务在这里使用的那样。所以为了制作现场演示，我必须 make a plunker，你必须运行在窗口模式下 。

如果您需要自己设置文件名，则需要使用 showDirectoryPicker() 请求目录访问权限，然后使用其 getFileHandle() 方法从该目录句柄获取 FileHandle . plnkr

如何使用现代 FileApi 在本地 fs 中创建文件？

How to create file in the local fs using modern FileApi?

javascript

fileapi