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>
