Vue导出JSON文件，读取本地上传JSON文件

导出JSON文件

// 插件安装
import FileSaver from 'file-saver'

导出代码

const data = JSON.stringify('存放JS数组或者对象')
const blob = new Blob([data], { type: 'application/json' })
FileSaver.saveAs(blob, `文件名称.json`)

读取的弹出框

读取本地上传JSON文件

// 由于我是 vue项目使用的 element-ui的组件库,所以用到 el-upload
<el-upload
	drag
    :limit="1"	// 上传一个文件
     action="https://jsonplaceholder.typicode.com/posts/"	// 此处链接随便填写
     ref="upload"
     accept=".json"	// 文件格式
     :file-list="fileList" 	// 文件列表
     :on-success="onSuccess"	// 文件上传成功时，响应
     :on-remove="onRemove">		// 点击文件后面的小叉叉，响应
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">上传json文件，且只能上传 1 个文件</div>
 </el-upload>
 <el-button type="primary" @click="save">确定</el-button>
 
<script>
	export default {
		data() {
			return {
				fileList: [],
				uploadData: []
			}
		},
		methods: {
			onSuccess(res, file, fileList) {
				let reader = new FileReader()
				reader.readAsText(file.raw)
				reader.onload = ((e) => {
						this.uploadData = []
						this.uploadData = JSON.parse(e.target.result)
				})
			},
			onRemove(file) {
				this.fileList = []
			},
			save() {
				// 把数据发送给 父元素
				this.$emit('uploadParent', this.uploadData)
			}
		}
	}
</script>

onload数据返回

扩展

JSON.stringify()
	将Javascipt值转换为 JSON 字符串
	
JSON.parse
	将JSON字符串转换为对象
	
Bolb
	对象表示一个不可变，原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成ReadableStream来用于数据操作
	
FileReader
	对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用file或Blob对象指定要读取的文件或数据
	
FileReader.readAsText()
	开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容
	
onload
	文件读取成功完成时触发