//class
my_fileReader( e ) {
        console.log(e.target.files[0]);
        const reader = new FileReader();
        // 用readAsText读取TXT文件内容
        reader.readAsText(e.target.files[0]);
        reader.onload = function (e) {
            console.log(e.target.result);    //读取结果保存在字符串中
            let my_str = e.target.result;    //直接保存全部数据为一个字符串
            let my_arr = my_str.split(/[\s\n]/);   //按空格和换行符切割字符串,并保存在数组中
            this.setState({
                previewPic: e.target.result,
                arr : my_arr
            });
        }.bind(this);
    };
 
//render 
<input type="file" className="file" onChange={this.handleUpload} />
<div> {this.state.previewPic} </div>
{arr  && arr.map((item, index )=>(
                        <div key = {`key${index}`} >
                                {item}
                        </div>
                    )
 )}

react FileReader读取TXT文件并保存 split切割字符串 map()分别渲染切割后的数组内的所有字符串的更多相关文章

  1. java读取txt文件的2中方法---并将内容(每一行以固定的字符分割切成2段)存到map中去

    #java读取txt文件的第一种方法 /** * 方法:readTxt * 功能:读取txt文件并把txt文件的内容---每一行作为一个字符串加入到List中去 * 参数:txt文件的地址 * 返回: ...

  2. fileReader对象读取txt文件乱码问题 以及如何获取文件的url路径(绝对路径)

    <input type="file" @change="aaa($event)"> <div id="hi">< ...

  3. Java读取txt文件信息并操作。

    一.java读取txt文件内容 import java.io.BufferedInputStream; import java.io.BufferedReader; import java.io.Fi ...

  4. web端自动化——Python读取txt文件、csv文件、xml文件

    1.读取txt文件 txt文件是我们经常操作的文件类型,Python提供了以下几种读取txt文件的方式. 1)read(): 读取整个文件. 2)readline(): 读取一行数据. 3)readl ...

  5. Javascript写入txt和读取txt文件的方法

    文章主要介绍了Javascript写入txt和读取txt文件的方法,需要的朋友可以参考下1. 写入 FileSystemObject可以将文件翻译成文件流. 第一步: 例: 复制代码 代码如下: Va ...

  6. JAVA读取TXT文件、新建TXT文件、写入TXT文件

    1.创建TXT文件 按照正常的逻辑写就好 先定义一个文件给定一个路径——>判断这个路径上这个文件存不存在——>若不存在则建立,try/catch根据程序提示自动生成就好 2.读取TXT文件 ...

  7. C#生成PDF文档,读取TXT文件内容

    using System.IO;using iTextSharp.text;using iTextSharp.text.pdf; //需要在项目里引用ICSharpCode.SharpZipLib.d ...

  8. C#读取txt文件返回DATATABLE

    //1.打开资源管理器 OpenFileDialog open = new OpenFileDialog(); if (open.ShowDialog() == DialogResult.OK) { ...

  9. java读取txt文件内容

    package read; import java.io.BufferedReader; import java.io.File; import java.io.FileReader; public ...

随机推荐

  1. 洛谷P1248 加工生产调度 贪心

    正解:贪心 解题报告: 传送门$QwQ$ $umm$直接看可能比较难想,可以先考虑另一个题? 有$n$个小怪,每打一只小怪会扣$a_i$的血,打完之后会回升$b_i$的血,问至少要多少血量才能使全程血 ...

  2. Java入门(三)——集合概讲

    集合(或者叫容器)是Java的核心知识点,它有着很深的深度.我们这里不会设计多深,仅仅作为了解入门,深入了解请移步各种集合源码文章.好的,下面正是开始介绍... Java集合为何而生 我们知道,Jav ...

  3. 在nginx里面部署node.js本地服务器

    我一个前端,为啥要搞服务器呢?因为公司就招了一个后端啊,后端忙不过来,就叫我这个萌新前端去搞后端的东西,我太难了. 直接进入正题吧,因为公司需求,要我在nginx服务器上面搭一个node.js服务器, ...

  4. centos下MySQL登录1045问题解决

    由于需要在centos下部署整个应用,自然少不了对数据库的操作.但很多人可能会遇到一些问题,比如创建用户成功,但是却无法登录. 无法登陆一般就两个原因.第一,远程访问端口没开,第二个原因就是密码错误了 ...

  5. 大数据学习之路-Centos6安装python3.5

    Centos 6.8安装python3.5.2 因为学习所需,需要用到python3.x的环境,目前Linux系统默认的版本都是python2.x的,还有一些自带的工具需要用到python2.6版本, ...

  6. 1031 查验身份证 (15 分)C语言

    题目描述 一个合法的身份证号码由17位地区.日期编号和顺序编号加1位校验码组成.校验码的计算规则如下: 首先对前17位数字加权求和,权重分配为:{7,9,10,5,8,4,2,1,6,3,7,9,10 ...

  7. spring cloud微服务快速教程之(四)熔断器(Hystrix)及其工具(Dashboard、Turbine)

    0-为什么需要熔断器 在分布式系统中,各个服务相互调用相互依赖,如果某个服务挂了,很可能导致其他调用它的一连串服务也挂掉或者在不断等待中耗尽服务器资源,这种现象称之为雪崩效应: 未来防止系统雪崩,熔断 ...

  8. ACWing 248. 窗内的星星|扫描线+懒惰标记

    传送门 题目描述 在一个天空中有很多星星(看作平面直角坐标系),已知每颗星星的坐标和亮度(都是整数). 求用宽为W.高为H的矩形窗户(W,H为正整数)能圈住的星星的亮度总和最大是多少.(矩形边界上的星 ...

  9. LinkedHashMap与HashMap的使用比较

    现在由于项目需要,使用了LinkedHashMap,一开始由于很少用到Map,然后就直接使用了HashMap,在将数据成功存入之后取出来就出了问题,数据输出顺序没有按预期顺序输出,现在先看代码: 文件 ...

  10. Redis-缓存穿透、缓存雪崩、缓存击穿、缓存一致性、并发竞争

    缓存流程 在讲这五个问题之前,首先我们回顾下正常的缓存的使用流程 程序在处理请求时,会先从缓存中进行查询,如果缓存中没有对应的key,则会从数据库中查询,如果查询到结果,并将查询结果添加到缓存中去,反 ...