首页 > 其他分享 >前端文件打开并且读取内容展示

前端文件打开并且读取内容展示

时间:2023-07-13 14:45:54浏览次数:41  
标签:文件 const 读取 展示 前端 fileList event reader any

1. 函数封装

const onl oadend1 = (e: any, a: any) => {
  const { graph } = FlowGraph
const reader = new FileReader();
 const fileList = fileRef1.value.files  // 这个就是选中的文件流
 if (!fileList.length) return
 reader.readAsText(fileList[0], "UTF-8");
 reader.onload = function (event: any) {
  console.log(event.target.result)  // 这个就是文件内容
  graph.fromJSON(JSON.parse(event.target.result))
 }
}

 

标签:文件,const,读取,展示,前端,fileList,event,reader,any
From: https://www.cnblogs.com/zhulongxu/p/17550414.html

相关文章

  • 关于本地开发对接前端的解决思路
    场景1:假设局域网启动了一个禅道(管理项目的一个后台系统),ip为10.10.119.66:8081,我当然可以直接通过10.10.119.66:8081来访问到禅道了。但是我还想让别人都用个域名www.lidisam.cn:8081来访问禅道。解决步骤:1打开 C:\Windows\System32\drivers\etc\hosts,并编辑添加一行如下:......
  • Asp.net core中的配置提供程序和读取
    ASP.NETCore中的应用程序配置是使用一个或多个配置提供程序执行的。配置提供程序使用各种配置源从键值对读取配置数据:设置文件,例如appsettings.json环境变量AzureKeyVaultAzure应用程序配置命令行参数已安装或已创建的自定义提供程序目录文件内存中的.NET对象......
  • DevExpress WinForms TreeList控件,让业务数据展示更清晰!(一)
    DevExpressWinForms的TreeList控件是一个功能齐全、数据感知的TreeView-ListView的混合体,它可以以树形、网格或两者结合的形式显示数据信息。无论是数据绑定模式还是非绑定模式,都具有完整的数据编辑支持。PS:DevExpressWinForm拥有180+组件和UI库,能为WindowsForms平台创建具有......
  • 如何实现在前端使用typescript的具体操作步骤
    在前端使用Typescript介绍Typescript是一种由微软开发的开源编程语言,它是JavaScript的超集,可以编译为纯JavaScript代码。Typescript增加了静态类型检查、面向对象编程和更好的工具支持,使得前端开发更加可靠和可维护。本文将教你如何在前端项目中使用Typescript。步骤下......
  • c# 读取json字符串节点内容
    c#读取json字符串节点内容stringjsonstr="{\"voiceprompt_callback\":{\"result\":\"1\",\"accept_time\":\"0\"}}";varty=JsonConvert.DeserializeObject(jsonstr);Newtonsoft.Json.Linq.JOb......
  • 读取jar包中资源目录失效
    目标文件: 请使用:InputStreamis=this.getClass().getResourceAsStream("/application.yml");这种方式原因其实是mvn的打包方式决定的,debug的时候getResource可以直接读取路径获取,打成jar则不行,当然如果你还在使用war包和tomcat,可以展开式部署,依然可以使用getResource......
  • Nginx 常用的基础配置(web前端相关方面)
    基础配置userroot;worker_processes1;events{worker_connections10240;}http{log_format'$remote_addr-$remote_user[$time_local]''"$request"$status$bod......
  • 盘点前端实现文件下载的几种方式
    前端涉及到的文件下载还是很多应用场景的,那么前端文件下载有多少种方式呢?每种方式有什么优缺点呢?下面就来一一介绍。1.使用a标签下载通过a标签的download属性来实现文件下载,这种方式是最简单的,也是我们比较常用的方式,先来看示例代码:<a href="http://www.baidu.com" downl......
  • GPT生产前端代码
    我让GPT生成一段前端代码:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><linkhref="https://cdn.quilljs.com/1.3.6/quill.snow.css"rel="......
  • python的pandas库读取SQL sever
    python的pandas库读取SQLsever有两种方法。一种使用pymssql,另一种使用sqlalchemy。只是将数据库中的表读为DataFrame,不进行修改等表操作。目录• python的pandas库读取SQLsever有两种方法。一种使用pymssql,另一种使用sqlalchemy。这里只是将数据库中的表读取为DataFrame,不进......