vue导入txt文本

参考大佬 http://www.php.cn/js-tutorial-393595.html

一、最终效果

如下

点击导入按钮，选择txt文件

这个是txt文本的内容

最终显示在textarea中的格式

二、代码实现原理：

使用vue文件阅读器组件fileReader结合input type='file'来完成，然后修改input格式

三、实现步骤

3.1首先建立fileReader组件，内容如下，可以直接用

<template id="fileReader"><div><span><input type="file" @change="loadTextFromFile"></span></div>
</template>
<script>
export default {methods: {loadTextFromFile: function(e) {const file = e.target.files[0];const reader = new FileReader();reader.onload = e => this.$emit("load", this.dealNum(e.target.result));reader.readAsText(file);},// 处理数字dealNum(item) {item = item.replace(/[^0-9]/g, ""); //不能 输入非数字item = this.sliceArr(item); //两位一组排成新数组// 去重Array.prototype.reArr = function() {var newArr = [];for (var i = 0; i < this.length; i++) {if (newArr.indexOf(this[i]) == -1) {newArr.push(this[i]);}}return newArr;};item = item.reArr(); //数组去重let array = item;//每两位数字之间搁一个空格let result = [];for (let i = 0; i < item.length; i++) {result.push(" " + item[i]);}item = result.join(""); //数组变成字符串return item;},//两位一组排成新数组sliceArr(item) {let arr = [];if (item.length <= 1) {arr.push(item);return arr;}for (let i = 0; i < item.length; i++) {if (i % 2 === 0) {let str = "";str = item.charAt(i) + item.charAt(i + 1);arr.push(str);}}return arr;}}
};
</script>

3.2在父组件中引入

//在template中@input监听输入@keyup键盘抬起@afterpaste表示复制内容粘贴完<textareaclass="qeInput"v-model="qeInputValue"@input="qeInput"@keyup="qeInput"@afterpaste="qeInput"cols="30"rows="10"></textarea><!-- 用span包住导入按钮的span和input是为了对input type='file'做样式处理 --><span class="qeBtnBg"><span class="leadBtn">导入</span><!-- @load="qeInputValue = $event"这句话表示导入的文件内容显示在textarea中 --><fileReader @load="qeInputValue = $event" class="qeBtnInput"></fileReader></span>

//script中
import fileReader from "./fileReader";
export default {components: {// Bet,fileReader},data() {return {qeInputValue: ""}},
methods:{qeInput() {var value = this.qeInputValue;//不能 输入非数字value = value.replace(/[^0-9]/g, "");value = this.sliceArr(value); //两位一组排成新数组// 去重Array.prototype.reArr = function() {var newArr = [];for (var i = 0; i < this.length; i++) {if (newArr.indexOf(this[i]) == -1) {newArr.push(this[i]);}}return newArr;};value = value.reArr(); //数组去重let array = value;//每两位数字之间搁一个空格let result = [];for (let i = 0; i < value.length; i++) {result.push(" " + value[i]);}this.qeInputValue = result.join(""); //数组变成字符串// console.log(array)}
}}

//style
.qeInput {width: 80%;height: 240px;
}
.qeBtnBg {position: relative;display: inline-block;overflow: hidden;
}
.qeBtnInput {position: absolute;right: 0px;top: 0px;opacity: 0;-ms-filter: "alpha(opacity=0)";
}
.leadBtn {border-radius: 4px;background-color: rgba(198, 126, 10, 1);color: rgba(255, 255, 255, 1);font-size: 14px;padding: 10px 34px;text-align: center;border: 1px solid rgba(255, 255, 255, 0);
}

vue导入txt文本相关推荐

易语言保存txt记录至c盘,易语言超级列表框导入TXT文本后修改保存和新增记录...
.版本 2 .支持库 iext .程序集窗口程序集_启动窗口 .子程序 __启动窗口_创建完毕 .局部变量读到的, 文本型 .局部变量第一次分割, 文本型, , "0" .局 ...
plsql导入txt文本数据是乱码_PL/sql导入sql文件中文乱码解决办法
从别处接过来的pl/SQL导出文件XX.sql文件,用pl/sql工具中的import功能导入到本地库后,发现表的comment注释中文乱码,可通过以下办法解决,特记录如下: 1)进入pl/sql安装 ...
在EXCEL中导入txt文本数据
工具栏:数据-->自文本
关于如何在matlab中导入并翻译Hypemesh导出的大型刚度矩阵txt文本
刚度矩阵是有限元计算中最重要的矩阵,它是一个典型的对称稀疏矩阵,并且非零元素全部集中前言在对角线附近,稀疏矩阵就是零元素远大于非零元素的数目,所谓大型刚度矩阵.这里指稀疏矩阵中非零元素的数目有50 ...
Navicat怎样导入Excel表格和txt文本的数据
Navicat怎样导入Excel表格数据 1. 准备excel数据表,第一行是字段名,第二到五行是数据 (1.当需要存储的字段为null时,对应的单元格不写 2.注意数据是在哪个工作表中,例如:下面 ...
导入下载excel（还有excel多个sheet）和txt文本的方法
我们经常需要通过上载excel或者是txt文本然后进行处理..处理excel和txt文本有多种方法,一般都是通过调用function module或者是method来完成: 1.导入excel并处理 ...
matlab导入txt数据_如何正确的将txt文本数据导入到Word中使用？
在日常办公中,有许多软件保存的文件格式往往都是txt文本格式,那我们应该如何将这些内容导入到Word中并排序好呢? 直接复制?如果你是一些文本内容,直接复制肯定没问题.但如果是数据类型的,那直接复制到 ...
经纬度 c代码中定义_如何将TXT文本格式的批量经纬度值导入到奥维成为标签
文本编辑: 示例1:最基本的,只批量导入WGS-84经纬度值成为标签,不需要导入标签名称. 文本编辑格式:经度值+空格+纬度值+换行,如下图: 示例2:除WGS-84经纬度外,还要导入标签名称. 文本 ...
python如何将txt文本导入excel实例
如何将txt文本导入excel实例这里我们用python中的random.randint方法在txt文本当中随机生成100份成绩这里我的项目文件名为to_score.py import rando ...
将txt文本数据导入到Excel中
1 txt文件如下,将txt中的数据导入到新建的Excel中(以office2016为例) 2 在Excel中选择数据.获取外部数据.自文本,选择要导入的文本 3 进入文本导入向导,共三步,根据自己的 ...

vue导入txt文本

vue导入txt文本相关推荐

最新文章

热门文章