vue + element-ui 实现读取 json 文件内容并处理下载

一、使用element-ui中文件上传组件

<el-upload
	class="upload-demo"
	drag
	action="#"
	:auto-upload="false"
	:on-change="uploadFile"
>
	<i class="el-icon-upload"></i>
	<div class="el-upload__text">
		将文件拖到此处，或<em>点击选择文件</em>
	</div>
</el-upload>

注意：组件默认会自动上传，如果只想选择文件不上传，设置 action=“#” 和 :auto-upload=“false”

二、读取文件内容

组件自带 :on-change=“” 方法

uploadFile(file) {
	fileName = file.name;
	const reader = new FileReader();
	// 异步处理文件数据
	reader.readAsText(file.raw, "UTF-8");
	// 处理完成后立马触发 onload
	reader.onload = (fileReader) => {
		const fileData = fileReader.target.result;
		// console.log(JSON.parse(fileData));
		// console.log(JSON.parse(reader.result));
		// 上面的两个输出相同
		// JSON.parse(fileData) 就是读取到的内容，可在此进行文件处理
	};
},

三、下载文件

推荐一个第三方库：FileSaver

var blob = new Blob([JSON.stringify("处理好的内容")], {
	type: "text/plain;charset=utf-8",
});
saveAs(blob, "文件名字");