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

1. 读取本地文件

方法1：

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

<input type="file" @change="selectFail" />复制

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

// 使用前端原生组件回调获取文件
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('无法解析文件', err)
            }
​
        };
    }
}复制

方法2

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

<button @click="selectFail2">读取本地文件</button>复制

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);
    }
}复制

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

<button @click="saveFail">保存</button>复制

// 保存文件
async saveFail() {
    // （对之前获取的文件）执行写入操作
    const writable = await this.fileHandle.createWritable();
    // 写入内容：this.msg
    await writable.write(this.msg);
    // 写入结束
    await writable.close();
}复制

3. 另存为

<button @click="saveAsFail">另存为</button>复制

// 另存为
async saveAsFail() {
    // 新建文件参数
    const opts = {
        type: 'save-file',  // 指定文件选择器的类型，'save-file' 表示文件选择器用于 保存文件
        accepts: [{
            description: 'Text file',   // 在文件选择器中显示文件类型的名称
            extensions: ['txt'],        // 文件拓展名
            mimeTypes: ['text/plain'],  // 文件的 MIME 类型
        }]
    };
    // 新建文件
    const fileHandle = await window.showSaveFilePicker(opts);
    // 对新建的文件执行写入操作
    const writable = await fileHandle.createWritable();
    // 写入内容：this.msg
    await writable.write(this.msg);
    // 写入结束
    await writable.close();
}复制

4. 完整代码及演示

<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>复制