你还以为前端无法操作文件吗
这里面有个值得说明一点的问题是，我一直以为（可能有人跟我一样）前端是无法操作文件的，可实际上自从HTML5标准出现之后，前端虽然无法像后端那样能灵活的进行文件处理，但因为有了File System Api这套接口，前端也能够进行简单的文件处理操作（不只是读，还有写）。当然，网络环境鱼龙混杂，为防止不法网站任意获取和修改用户数据，所有本地文件操作都需要用户手动操作，不能自动保存或打开。
使用场景
File System Api为浏览器应用增加了无限可能，比如我们经常用到的一些流程图工具，上面的保存到本地的功能，就不用再依赖后端，可以直接将数据保存到本地的文件系统中，下次打开时选中本地的指定文件，可以直接加载到浏览器中，大大提高的前端的能力边界。
功能描述
我们就利用File Access Api搞一个简单的在线编辑器，能实现的功能如下：
第一步，新建一个文件，命名为
hello.txt，并填写初始信息 "hello world"第二步，打开文件，修改文件内容为“hello world，hello you!”
第三步，保存文件
实现方式概述
直接看代码：
<template>
<div>
<el-button type="primary" @click="editFile">编辑文件el-button>
<el-button type="primary" @click="saveFile">保存文件el-button>
<el-input
type="textarea"
:rows="20"
placeholder="请输入内容"
v-model="textarea">el-input>
div>
template>
<script>
export default {
data() {
return {
textarea: ''
}
},
methods: {
editFile: async function() {
// 选择文件
let [fileHandle] = await window.showOpenFilePicker()
// 复显文件内容
fileHandle.getFile().then(blob => {
blob.text().then(val => {
this.textarea = val
})
})
},
saveFile: async function() {
// 新建一个文件
const fileHandle = await window.showSaveFilePicker({
types: [
{
description: 'hello',
accept: {
'text/plain': ['.txt']
// 对于一些非常用的后缀，均使用这种方式进行定义
// 参考：https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
// 'application/octet-stream': ['.a','.b']
}
}
]
})
// 在文件内写入内容，写入内容用的是Stream Api，流式写入
const writable = await fileHandle.createWritable();
await writable.write(this.textarea);
await writable.close();
}
}
}
script>可以看到，只需要短短的几行代码就可以完成本地文件的修改，需要注意的是，文件的保存不是实际意义上的修改，而是新建一个文件，进行替换，然后在新的文件里写入最新信息进行的修改。
另：File System Api目前支持程度还不够普遍，从mdn上来看，大多数api上还有
Experimental: This is an experimental technology Check the Browser compatibility table carefully before using this in production.的描述，使用前需要确认好是否满足浏览器要求。
作者：DaEar图图
来源：juejin.cn/post/7365679089811947561
来源：juejin.cn/post/7365679089811947561
