antd-Pro利用fileReader()在前端读取文件内容

最新推荐文章于 2024-08-05 23:30:12 发布

百岁如流富贵冷灰

最新推荐文章于 2024-08-05 23:30:12 发布

阅读量4.8k

点赞数 3

分类专栏： react

本文链接：https://blog.csdn.net/qq8241994/article/details/86087423

版权

react 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

前几天在开发中遇到了一个问题，需要通过前端读取文件中的内容，并且显示在文本框内，查询资料后整合的解决方法如下：

getTextInfo=(file)=>{
    const reader=new FileReader();
    reader.readAsText(file);
    reader.onload=(result)=>{
        let targetNum=result.target.result;
        targetNum=targetNum.replace(/[\n\r]/g,'');//对获取的内容进行修改
        targetNum=targetNum.replace(/[ ]/g,'');//对获取内容进行修改
        this.props.dispatch({
            type:'model/save',
            payload:targetNum,
        })
    
    }
    return false;
}

render(){
    .
    .
    .
    <Upload action="" accept="text/plain" beforeUpload={this.getTextInfo} showUploadList={false}>
        <Button icon='upload'>导入</Button>
    </Upload>
    .
    .
    .
}

获取这个文件的内容需要注意文本的编码格式，如果编码格式不一致的话会出现汉字乱码的问题，可以通过调整文件的编码格式来解决