前端 实现浏览器读写本地文件（适配HTML，VUE，react）

1. 读取本地文件

方法1：

1. 利用input标签获取本地文件对象file（vue格式）

1. <input type="file" @change="selectFail" />

复制代码

2. 吸取回调处理获取到的文件数据

1. // 使用前端原生组件回调获取文件
2. selectFail(event) {
3.    // 获取文件对象
4.    const file = event.target.files[0];
5.    if (file) {
6.        const reader = new FileReader();
7.        reader.onload = (e) => {
8.            // 解析文件内容
9.            try {
10.                this.msg = e.target.result
11.            } catch (err) {
12.                console.log('无法解析文件', err)
13.            }
14. ​
15.        };
16.    }
17. }

复制代码

方法2

1. 利用浏览器API：window.showOpenFilePicker，留意文件选择 必须由用户的 交互动作 触发，不能直接调用

1. <button @click="selectFail2">读取本地文件</button>

复制代码

2.  获取文件对象并处理数据

1. // 调用浏览器方法获取文件对象
2. async selectFail2() {
3.    try {
4.        // 获取当前选择的文件
5.        const [fileHandle] = await window.showOpenFilePicker();
6.        // 存储当前选择的文件（用户后续直接保存时直接找到被保存的对应文件）
7.        this.fileHandle = fileHandle
8.        // 获取文件内容
9.        const file = await this.fileHandle.getFile();
10.        const contents = await file.text();
11.        this.msg = contents;
12.    } catch (error) {
13.        console.error('无法选择文件', error);
14.    }
15. }

复制代码

2. 生存（修改原文件内容）

1. <button @click="saveFail">保存</button>

复制代码

1. // 保存文件
2. async saveFail() {
3.    // （对之前获取的文件）执行写入操作
4.    const writable = await this.fileHandle.createWritable();
5.    // 写入内容：this.msg
6.    await writable.write(this.msg);
7.    // 写入结束
8.    await writable.close();
9. }

复制代码

3. 另存为

1. <button @click="saveAsFail">另存为</button>

复制代码

1. // 另存为
2. async saveAsFail() {
3.    // 新建文件参数
4.    const opts = {
5.        type: 'save-file',  // 指定文件选择器的类型，'save-file' 表示文件选择器用于 保存文件
6.        accepts: [{
7.            description: 'Text file',   // 在文件选择器中显示文件类型的名称
8.            extensions: ['txt'],        // 文件拓展名
9.            mimeTypes: ['text/plain'],  // 文件的 MIME 类型
10.        }]
11.    };
12.    // 新建文件
13.    const fileHandle = await window.showSaveFilePicker(opts);
14.    // 对新建的文件执行写入操作
15.    const writable = await fileHandle.createWritable();
16.    // 写入内容：this.msg
17.    await writable.write(this.msg);
18.    // 写入结束
19.    await writable.close();
20. }

复制代码

4. 完整代码及演示

1. <template>    <div>        <input type="file" @change="selectFail" /> <!-- 文件上传方法1 -->        <button @click="selectFail2">读取本地文件</button> <!-- 文件上传方法2 -->​        <button @click="saveFail">保存</button>        <button @click="saveAsFail">另存为</button>        <div>            <input type="text" v-model="msg">        </div>    </div></template>​<script>​export default {    data() {        return {            msg: '',        // 展示读取的文件内容            fileHandle: null,   // 当前正在处理的文件句柄（可以理解为正在处理的文件）        }    },    methods: {        // 文件上传方法1        selectFail(event) {            const file = event.target.files[0];            if (file) {                const reader = new FileReader();                reader.onload = (e) => {                    try {                        this.msg = e.target.result;                    } catch (err) {                        console.log('无法解析JSON文件', err)                    }​                };                reader.readAsText(file);            }        },        // 文件上传方法2        async selectFail2() {            try {                const [fileHandle] = await window.showOpenFilePicker();                this.fileHandle = fileHandle                const file = await this.fileHandle.getFile();                const contents = await file.text();                this.msg = contents;            } catch (error) {                console.error('无法选择文件', error);            }        },        // 生存文件        async saveFail() {            const writable = await this.fileHandle.createWritable();            await writable.write(this.msg);            await writable.close();        },        // 另存为        async saveAsFail() {            const opts = {                type: 'save-file',                accepts: [{                    description: 'Text file',                    extensions: ['txt'],                    mimeTypes: ['text/plain'],                }]            };            // 新建文件的句柄            const fileHandle = await window.showSaveFilePicker(opts);            const writable = await fileHandle.createWritable();            await writable.write(this.msg);            await writable.close();        }    }}</script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。