Vue （ElementUI）在前端浏览器读取文本文件(如JSON)内容

有时想要导入数据到数据库，需要上传相应的文本文件，而这种文件基本上是一次消耗品，也就是上传到后端服务读取了数据之后需要将上传的该文件进行删除。

vue 文件template中的代码：

1<el-upload
2            action=""
3            :on-change="readFile"
4            :show-file-list="false"
5            :auto-upload="false"
6          >
7            <el-button size="small" type="primary">点击上传</el-button>
8            <div class="el-upload__tip" slot="tip">只支持上传JSON文件</div>
9</el-upload>

vue 中methods中的readFile：

1readFile(file) {
2      // TODO: file.type === 'XXX' 校验是否是指定的文本文件
3      let reader = new FileReader()
4      reader.readAsText(file.raw)
5      reader.onload = (e) => {
6        // 读取文件内容
7        const cont = e.target.result
8        console.log(cont)
9        // 接下来可对文件内容进行处理
10      }
11}

参考： https://blog.csdn.net/weixin_43805439/article/details/104969116 https://blog.csdn.net/zucheng10/article/details/112629082