需求:
用户点击上传按钮,将用户从本地上传的文件展示到页面上进行预览,没有和后端交互纯前端。
实现思路:
1.使用input标签做上传
<input ref="inputRef" id="data2" @click="uploadJson" type="file" />
2.监听input的change事件
input.onchange = function (e) {console.log(e)} //上传的数据在e对象里面
3.使用 FileReader()将文件解析并保存到变量,下面是具体代码,核心代码就两句
1. var reader = new FileReader() 2. reader.readAsText(file, "utf-8")//如果乱码还可以用gbk编码
实现代码:
uploadJson () { let that = this //先拿一下this指向vue //页面的input属性id值,这里写自己的 var input = document.getElementById("data2") input.onchange = function (da) { var file = da.path[0].files[0] //这个地方先打印下da,看看数据在哪里 console.log('3333', file) if (true) { var reader = new FileReader() reader.readAsText(file, "utf-8")//还可以用gbk编码,我是utf8 reader.onload = function (da) { that.daoRuJson = JSON.parse(da.target.result) that.openOrCloEditor = true//将数据保存到自己设置的变量 } } } },