首页 > 其他分享 >vue 本地加载txt 并读取

vue 本地加载txt 并读取

时间:2022-10-28 10:33:26浏览次数:50  
标签:vue name FileReader gg file reader txt 加载

<template>
  <div>
    <el-button @click="txtbtn">插入文本</el-button>
    <input type="file" @change="loadTextFromFile" id="txt" style="display:none" />
    <div>{{gg}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gg: "111111",
    };
  },
  methods: {
    // txt文本
    txtbtn() {
      document.getElementById("txt").click();
    },
    loadTextFromFile(e) {
      const file = e.target.files[0];
      let name = file.name.split(".").splice(-1).toString();
      if (name !== "txt") {
        this.$message.success("文件类型错误,请重新选择文件");
        return;
      }
      const reader = new FileReader();
      if (typeof FileReader === "undefined") {
        alert("您的浏览器不支持FileReader接口");
      }
      reader.onload = (e) => this.$emit("load", this.dealNum(e.target.result));
      reader.readAsText(file, "utf-8"); 
    },
    dealNum(item) {
      this.gg = item;
      console.log(item);
    },
  },
};
</script>

<style>
</style>

 

标签:vue,name,FileReader,gg,file,reader,txt,加载
From: https://www.cnblogs.com/cc0518/p/16834995.html

相关文章

  • Vue项目部署到IIS后,刷新报错404
    这里需要用到URL重写工具--URLRewrite(默认没有,需要自己下载安装)如果IIS上默认有安装Web平台安装程序,我们可以使用平台自动安装URLRewrite重写工具,打开IIS在管理器......
  • AMD Xilinx MPSoC Linux加载bit文件
    AMDXilinxMPSoCLinux加载bit文件草稿目录总结概述OverviewLinux加载fullbitLinux加载fullbit和devicetreeLinux加载partialbitLinux加载partialbit和......
  • 基于springboot+vue物资管理系统java物资统计系统(源码调试+讲解+文档)
    ......
  • Vue - axios
    Axios 发送GET请求 axios({//请求方式method:"GET",//请求地址url:"http://www.liulongbin.top:3006/api/g......
  • #yyds干货盘点#vue的防抖
    在监听频繁触发的事件时,一定要多加小心,比如用户在输入框打字、窗口大小调整、滚动、IntersectionObserver事件。这些事件总是被频繁触发,可能几秒一次。如果针对每次事件......
  • new: 轮播图 | MDN上HTML的总结和CSS面试题解答,以及vue-admin/豆瓣一个静态页面的实现
    主要参看oppo官网https://www.oppo.com/cn/,实现以下功能一、轮播图https://www.cnblogs.com/WindrunnerMax/p/12638005.html通常是在首页读秒播放的图片,本次了解的是opp......
  • vue项目总结
    项目总结在进行网站数据请求的过程中,面临接口实时刷新的情况,数据请求过期解决:将最新请求出来的数据本地存储便于页面渲染再用到项目中所需要的组件有问题时,学会查看......
  • C语言学生管理系统(将数据保存至TXT文档)附源码
    C语言学生管理系统(将数据保存至TXT文档)在大一学习完C语言之后,回家遇到疫情,便有了用C语言写一个学生管理系统的想法,在家花费了一些时间,刚开始写了一点,后来可能是因为学艺不......
  • vue-element-admin框架学习笔记
    0背景vue-element-admin是一个已高度完成的系统原型,它基于vue框架和elementUI组件库。它使用最新的前端技术栈,内置i18n国际化解决方案、动态路由、权限验证。它可以帮助......
  • Vue学习笔记之使用computed计算属性
    0x00概述本文主要记录Vue页面使用computed计算属性0x01computed基本使用在computed中定义一个函数(看起来是一个函数,其实是一个属性),命名按照属性规范命名(一般为名词)......