//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. NFS服务介绍及实验

    一.什么是NFS NFS 是 Network File System 的缩写,即网络文件系统.一种使用于分散式文件系统的协定,由 Sun 公司开发,于 1984 年向外公布.功能是通过网络让不同的机器 ...

  2. 【题解】P1712 [NOI2016]区间(贪心+线段树)

    [题解]P1712 [NOI2016]区间(贪心+线段树) 一个observe是,对于一个合法的方案,将其线段长度按照从大到小排序后,他极差的来源是第一个和最后一个.或者说,读入的线段按照长度分类后, ...

  3. jmeter 5.1版本更新说明

    版本5.1 摘要 新的和值得注意的 不兼容的变化 Bug修复 改进 非功能性变化 已知问题和解决方法 谢谢 新的和值得注意的 核心改进 JDBC测试已得到改进,能够设置init SQL语句并添加与不支 ...

  4. 1086 就不告诉你 (15分)C语言

    做作业的时候,邻座的小盆友问你:"五乘以七等于多少?"你应该不失礼貌地微笑着告诉他:"五十三."本题就要求你,对任何一对给定的正整数,倒着输出它们的乘积. 输入 ...

  5. echo 传义序列

    echo 传义序列:\a 警示字符\b 退格\c 输出中忽略最后的换行符\f 清屏\n 换行\r 回车\t 水平制表符\v 垂直制表符\\ 反斜杠字符\0ddd 将字符表示成1到3位的八进制数值

  6. ECOS问题解决记录

    1.finder自定义列 http://club.ec-os.net/doc/ecos/framework-ecos/advance/desktop/dev.html#id5 2.命令行工具 地址 h ...

  7. three.js入门第一个案例

    准备工作 1.运用three.js进行3d开发,其实和页面编程一样,首先需要在html文件中引入three.js.Three.js使用面向对象的方式来构建程序,它包含3个基本对象: 场景(scene) ...

  8. 最小生成树kruskal 知识点讲解+模板

    0.前言 因为本人太蒟了 我现在连NOIP的初赛都在胆战心惊 并且我甚至连最小生成树都没有学过 所以这一篇博客一定是最详细的QAQ 哈哈 请您认真看完如果有疏漏之处敬请留言指正 感谢! Thanks♪ ...

  9. 算法笔记codeup-Contest100000568

    A #include <stdio.h> int main() { ; ; while(a) { sum=sum+a; a--; } printf("%d",sum); ...

  10. Docker学习(九)Volumn容器间共享数据

    Docker学习(九)Volumn容器间共享数据 volume是什么 volume在英文中是容量的意思, 在docker中是数据卷的意思,是用来保存数据的容器 为什么要进行数据共享 在集群中有多台to ...