如何使用现代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 />

当我用输入控件选择文件时，我想创建文件的副本。我的代码出了什么问题？我没有错误，什么也没发生

Answer 1

现代"；API被称为文件系统访问，它仍然只是一个提议，但预计将取代以前和不推荐使用的文件系统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或最流行的小提琴服务使用的iframe。因此，为了制作一个实时演示，我必须制作一个plunker，即必须在窗口模式下运行。

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

Answer 2

文档指出，此方法是非标准的，仅在Chrome中使用，并且已经弃用：

即使与文件和目录条目API的其余部分相比，requestFileSystem((尤其是非标准的；只有Chrome实现它和所有其他浏览器制造商都决定不会实施它。它甚至已从提议中删除规格不要使用这种方法！

您不应该使用这个。