//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. 基于ambassador实现K8S灰度发布

    为什么需要灰度发布 灰度发布(又名金丝雀发布)是指在黑与白之间,能够平滑过渡的一种发布方式.在其上可以进行A/B testing,即让一部分用户继续用产品特性A,一部分用户开始用产品特性B,如果用户对 ...

  2. Visual Studio 2015 编译生成支持HTTPS协议的libcurl静态库

    由于之前的工作需要使用libcurl 开源项目库 在各种研究后发现无法使用HTTPS协议 后来经过各种翻阅文档,发现需要OpenSSL支持,这个需要自己下载并自己编译生成 lib 或者 dll 至于O ...

  3. 【题解】P1373 小a和uim之大逃离

    [题解]P1373 小a和uim之大逃离 考虑到可能会MLE,考虑状态压缩一下 由于只要得到他们的差就行了,所以直接少记录一维就好了 \(dp(i,j,r,1/0)\)表示在\(i,j\)点,当前ui ...

  4. 2020了你还不会Java8新特性?(六)Stream源码剖析

    Stream流源码详解 节前小插曲 AutoCloseable接口: 通过一个例子 举例自动关闭流的实现. public interface BaseStream<T, S extends Ba ...

  5. 突破CRUD | 简单优雅的代码生成工具诞生记(万字长文慎入)

    0.学习本文你或许可以收获 1.一个需求从产生.分析到解决的全过程思考2.简单的面向对象分析实践3.UML类图实践4.设计模式的实践应用5.最后收获一款还算不错的代码生成工具实现思路和源代码 本文将从 ...

  6. spring之为什么要使用事务?

    问题描述:现在我们有一个数据库:spring 三张表:account.book.book_stock account存储着用户以及账户余额.book存储着书号.名字和 购买一本所需金额.book_st ...

  7. 2019 年 stackoverflow 网站最受欢迎的 20 个 Python 问题

    在最新一期的"Python开发者周刊"(Pycoder's weekly)里,我看到一则有意思的分享,故转出来分享给大家. 该分享来自是一份"python weekly ...

  8. Redis系列之----Redis的两种持久化机制(RDB和AOF)

    Redis的两种持久化机制(RDB和AOF) 什么是持久化    Redis的数据是存储在内存中的,内存中的数据随着服务器的重启或者宕机便会不复存在,在生产环境,服务器宕机更是屡见不鲜,所以,我们希望 ...

  9. VUE CLI环境搭建文档

    VUE CLI环境搭建文档 1.安装Node.js 下载地址 https://nodejs.org/zh-cn/download/ 2.全局安装VUE CLI win+R键打开运行cmd窗口输入一下代 ...

  10. 1z0-062 题库解析3

    The hr user executes the following query on the employees table but does not issue commit, rollback, ...