上传文件是某些应用场景中比较常见的功能。一般都是拿到源文件,直接发送相关
Blob
类型数据给接收者。但是如果我们要处理上传的文件数据或者需要根据上传的文件中的数据做一些其他事情时,那就需要一些其他操作了。
根据
type=file
获取相关的 file 数据
查看MDN
:
<input type="file" accept="application/json">
只获取 JSON 文件。通过 event.files[0]
,可以获取到相关的 file 数据。
有了 file 数据,那我们就可以通过 fileReader 来处理 file 数据:
const reader = new FileReader();
reader.readAsText(file, 'UTF-8');
reader.onload = fileReader => {
const fileData = fileReader.target.result;
console.log(JSON.parse(fileData as string));
console.log(JSON.parse(reader.result as string));
上传文件是某些应用场景中比较常见的功能。一般都是拿到源文件,直接发送相关 `Blob` 类型数据给接收者。但是如果我们要处理上传的文件数据或者需要根据上传的文件中的数据做一些其他事情时,那就需要一些其他操作了。
其实关于这个问题,网上已经可以找到些方法,不过基本上没有完整的,或者是其中有些坑,下面写一下自己的亲身实践。
使用vue读取本地json文件需要安装vue-resource插件,然后使用它的$http.get来读取json文件。
json文件应该是必须放在static目录下
然后使用npm install 命令安装vue-resource,太慢的话就使用淘宝镜像安装,安装完成后先引用这个组件。
在main.js文件中添加:
import VueResource from 'vue-resource'
Vue.use(VueResource)
最后读取json数据:
this.$
poi解析excel功能参数说明
此项目是基于springMVC实现的,基本流程为从前台jsp页面使用Ajax文件上传导入excel文件(.xls(97-03)/.xlsx(07以后)),传到后台controller调用相应工具类解析后返回指定参数做后续处理.
1. POIUtil.java工具类
解析通过MutilpartFile导入的Excel并解析里面数据,先判断文件的类型(excel处理有两种此处为两种通用)是.xls/.xlsx,通过workbook.getNumberOfSheets()获取工作簿数量,遍历工作簿,sheet.getLastRowNum()获取最大行数,将每行数据放入List list = new Array List(),并根据excel数据类型将器转换为字符串、数字、Boolean、公式、空值类型防止出现错误,最后返回一个list.
2. ExcelUtil.java工具类
解析通过MutilpartFile导入的Excel并解析里面数据,先判断文件的类型(excel处理有两种此处为两种通用)是.xls/.xlsx,采用Apache的POI的API来操作Excel,读取内容后保存到List中,再将List转Json(使用Linked,增删快,与Excel表顺序保持一致),Sheet表1————>List1<Map>
步骤1:根据Excel版本类型创建对于的Workbook以及CellSytle
步骤2:遍历每一个表中的每一行的每一列,这里做了些小改动,因为后续可能解析过后可能会保存入数据库,这里为第一行数据添加一个自定义表头
String[] p = new String[]{"name","age","sex","tel","address","e-mail","phone"};
遍历的列数量以p的length为准
步骤3:一个sheet表就是一个Json,多表就多Json,对应一个 List
一个sheet表的一行数据就是一个 Map
一行中的一列,就把当前列头为key,列值为value存到该列的Map中
Map 一个线性Hash Map,以Excel的sheet表顺序,并以sheet表明作为key,sheet表转换Json后的字符串作为value
最后返回一个LinkedHashMap
3. ExcelToJsonPoi.java工具类
这个与上面工具类类似,不过这个是解析本地excel文件不是使用的流,使用迭代遍历sheet工作簿与每行每列的值,将所有类型作为String类型处理返回一个json对象输出至控制台
批量上传CSV(实际上是任何* SV)文件到Elasticsearch
批量上传JSON文件/ JSON行到Elasticsearch
将镶木地板文件批量上传到Elasticsearch
预定义自定义映射
上传前删除索引
使用文档本身的_id索引文档
直接从网址加载数据
SSL和基本身份验证
Unicode支持 :victory_hand:
为了安装插件,只需运行pip install plugin-name
从redis列表中连续读取并索引到elasticsearch
用于列出和索引来自S3的文件的插件
python / es
const data = JSON.stringify('存放JS数组或者对象')
const blob = new Blob([data], { type: 'application/json' })
FileSaver.saveAs(blob, `文件名称.json`)
读取的弹出
读取本地上传JSON文件
// 由于我是 vue项目
//对path.json文件进行读取
$.getJSON("${pageContext.request.contextPath}/path.json",function (data) {
console.log(data[0].ipPath);
ipPath = data[0].ipPa.
import React from 'react';
import {fetch} from 'whatwg-fetch';
// import {HashRouter as Router,Route,Redirect,Switch} from 'react-router-dom'
import { Table,Input,Button,Radio,Modal} from 'antd';...
var formdata = new FormData();
formdata.append("csrfmiddlewaretoken",'{{ csrf_token }}');
if ($('.js_file')[0].files.length > 0){
$.each($('.js_file')[0].files, fu...