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

🧑‍💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣

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

1.使用场景

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

2.功能描述

我们就利用File Access Api搞一个简单的在线编辑器，能实现的功能如下：
第一步，新建一个文件，命名为hello.txt，并填写初始信息 “hello world”
第二步，打开文件，修改文件内容为“hello world，hello you!”
第三步，保存文件

3.实现方式概述

直接看代码：

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

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。