当前位置:
首页
文章
前端
详情

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

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

vue 文件template中的代码:

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

vue 中methods中的readFile

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

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

免责申明:本站发布的内容(图片、视频和文字)以转载和分享为主,文章观点不代表本站立场,如涉及侵权请联系站长邮箱:xbc-online@qq.com进行反馈,一经查实,将立刻删除涉嫌侵权内容。