你还以为前端无法操作文件吗

这里面有个值得说明一点的问题是，我一直以为（可能有人跟我一样）前端是无法操作文件的，可实际上自从HTML5标准出现之后，前端虽然无法像后端那样能灵活的进行文件处理，但因为有了File System Api这套接口，前端也能够进行简单的文件处理操作（不只是读，还有写）。当然，网络环境鱼龙混杂，为防止不法网站任意获取和修改用户数据，所有本地文件操作都需要用户手动操作，不能自动保存或打开。

1. 使用场景

   File System Api为浏览器应用增加了无限可能，比如我们经常用到的一些流程图工具，上面的保存到本地的功能，就不用再依赖后端，可以直接将数据保存到本地的文件系统中，下次打开时选中本地的指定文件，可以直接加载到浏览器中，大大提高的前端的能力边界。

2. 功能描述

   我们就利用File Access Api搞一个简单的在线编辑器，能实现的功能如下：

   第一步，新建一个文件，命名为hello.txt，并填写初始信息 "hello world"

   第二步，打开文件，修改文件内容为“hello world，hello you!”

   第三步，保存文件

2. 实现方式概述

   直接看代码：

   <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.的描述，使用前需要确认好是否满足浏览器要求。