前端 实现浏览器读写本地文件（适配HTML，VUE，react）
1. 读取本地文件方法1：
1. 利用input标签获取本地文件对象file（vue格式）
<input type="file" @change="selectFail" /> 2. 吸取回调处理获取到的文件数据
// 使用前端原生组件回调获取文件
selectFail(event) {
// 获取文件对象
const file = event.target.files;
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 = 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; 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 = 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> https://i-blog.csdnimg.cn/direct/34165f60a72341f79326da3b34b754fa.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]