Springboot与vue实现文件导入方法具体介绍
作者:进击的Coders 发布时间:2023-10-31 12:31:37
一、Java后端使用MultipartFile
@PostMapping(value = "/upload")
public String upload(@RequestParam("file") MultipartFile multipartFile) {
return FileUploadUtil.upload(multipartFile);
}
如果使用Springboot架构,直接使用MultipartFile工具即可,后端拿到MultipartFile对象之后,对其进一步处理就能拿到数据,或者存入数据库,或者保存到本地都可以。
二、Java后端直接从request中读取并转换为字符串
Part importFile = request.getPart("file");
InputStream inputstream = importFile.getInputStream();
BufferedReader streamReader = new BufferedReader(new InputStreamReader(inputstream, "UTF-8"));
StringBuilder stringBuilder = new StringBuilder();
String inputStr;
while ((inputStr = streamReader.readLine()) != null) {
stringBuilder.append(inputStr);
}
String s = stringBuilder.toString();
直接从request中读取需要使用Part类,从request中根据名称获取到part对象,然后再转换为流的形式,之后使用BufferedReader流读取器,逐行读取文件内容并添加到字符串构造器中,生成字符串。
三、Java后端直接从request中读取并存入本地文件
HttpServletRequest request = context.getRequest();
FileOutputStream fos = new FileOutputStream("C:\\Users\\Junhao\\Desktop\\import.json");
byte[] buffer = new byte[1024];
int len;
Part file = request.getPart("file");
InputStream inputstream = file.getInputStream();
while ((len = inputstream.read(buffer)) != -1){
fos.write(buffer, 0, len);
}
fos.close();
inputstream.close();
String responseString = readInputStream(inputstream);
System.out.println(responseString);
BufferedReader streamReader = new BufferedReader(new InputStreamReader(inputstream, "UTF-8"));
StringBuilder stringBuilder = new StringBuilder();
String inputStr;
while ((inputStr = streamReader.readLine()) != null) {
stringBuilder.append(inputStr);
}
String s = stringBuilder.toString();
Object parse = JSON.parse(s);
四、前端使用el-upload
由于要求在上传之前进行检验,然后根据检验的结果,对于冲突的实体,逐项选择覆盖已有实体,或者使用原来实体,这相对于单纯的文件上传,提高了难度
1.el-upload使用
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
<el-upload
ref="upload"
:limit="1"
accept=".json"
:headers="upload.headers"
:action="upload.url"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:on-change="handleChange"
:before-remove="handleRemove"
:auto-upload="false"
drag
:data="upload.uploadData"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处,或
<em>点击上传</em>
</div>
<div class="el-upload__tip" style="color:red" slot="tip">提示:仅允许导入“json”格式文件!</div>
</el-upload>
<div v-if="showImportCheckRes" style="margin-top: 8px">
<el-tabs active-name="thing">
<el-tab-pane name="thing" label="事物" style="height: 130px;" class="scrollbar">
<el-scrollbar style="height: 100%">
<el-form label-position="left">
<div v-for="item in importCheckRes.existThings">
<el-form-item :label="item.code" label-width="160px">
<el-radio-group v-model="item.value">
<el-radio :label="0">暂不导入</el-radio>
<el-radio :label="1">覆盖</el-radio>
</el-radio-group>
</el-form-item>
</div>
</el-form>
</el-scrollbar>
</el-tab-pane>
<el-tab-pane name="thingTemplate" label="事物模板" style="height: 130px;" class="scrollbar">
<el-scrollbar style="height: 100%">
<el-form label-position="left">
<div v-for="item in importCheckRes.existThings">
<el-form-item :label="item.code" label-width="160px">
<el-radio-group v-model="item.value">
<el-radio :label="0">暂不导入</el-radio>
<el-radio :label="1">覆盖</el-radio>
</el-radio-group>
</el-form-item>
</div>
</el-form>
</el-scrollbar>
</el-tab-pane>
<el-tab-pane name="dataModel" label="数据模型" style="height: 130px;" class="scrollbar">
<el-scrollbar style="height: 100%">
<el-form label-position="left">
<div v-for="item in importCheckRes.existDataModels">
<el-form-item :label="item.code" label-width="160px">
<el-radio-group v-model="item.value">
<el-radio :label="0">暂不导入</el-radio>
<el-radio :label="1">覆盖</el-radio>
</el-radio-group>
</el-form-item>
</div>
</el-form>
</el-scrollbar>
</el-tab-pane>
<el-tab-pane name="modelTag" label="模型标签" style="height: 130px;" class="scrollbar">
<el-scrollbar style="height: 100%">
<el-form label-position="left">
<div v-for="item in importCheckRes.existModelTags">
<el-form-item :label="item.code" label-width="160px">
<el-radio-group v-model="item.value">
<el-radio :label="0">暂不导入</el-radio>
<el-radio :label="1">覆盖</el-radio>
</el-radio-group>
</el-form-item>
</div>
</el-form>
</el-scrollbar>
</el-tab-pane>
</el-tabs>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitImport" size="mini">确 定</el-button>
<el-button @click="upload.open = false" size="mini">取 消</el-button>
</div>
</el-dialog>
2.on-change验证文件内容
handleChange(file){
if (this.importStatus === 1){
return;
}
let that = this
let raw = file.raw
const reader = new FileReader()
reader.readAsText(raw, 'UTF-8')
reader.onload=async function(evt){
let dataJson = JSON.parse(evt.target.result)
const Entities = dataJson.Entities
const entityCode = {}
Object.keys(Entities).forEach(item=>{
const tempArray = []
Object.values(Entities[item])[0].forEach(i=>{
tempArray.push(i.code)
})
that.$set(entityCode, item, JSON.parse(JSON.stringify(tempArray)))
})
that.$nextTick(()=>{
importCheck(entityCode).then(res=>{
that.importCheckRes = res.data
that.showImportCheckRes = true
})
})
}
},
在前端先解析文件,读取JSON数据,然后将要导入的code发送到后端,返回哪些是已有的,然后在前端进行覆盖或者暂不导入的选择,选择完成之后点击确定,携带选择的结果进行导入
submitImport() {
const tempJson = JSON.parse(JSON.stringify(this.importCheckRes))
const importCheckRes = {}
Object.keys(tempJson).forEach(item=>{
const tempArray = []
tempJson[item].forEach(i=>{
if (i.value === 1){
tempArray.push(i.code)
}
})
this.$set(importCheckRes, item, tempArray);
})
this.$set(this.upload, 'uploadData', { importCheckRes: JSON.stringify(importCheckRes) })
this.$nextTick(()=>{
this.$refs.upload.submit()
})
},
3.效果截图
导出时响应函数返回值必须为void。
前端也需要进行处理,使用vue的this.download()即可。
如果是普通的Springboot架构,导入可以直接使用MultipartFile。
如果不能使用MultiPartFile,那么可以使用Part从request.getPart(“fileName”)的方式获取part,然后进一步解析part获取文件内容。
后端可以将读取到的文件内容转换为字符串,使用BufferedRead和StringBuilder即可。
前端可以读取文件的内容,使用FileReader和reader.onload()即可。
如果如果单纯验证文件格式、大小或者名称是否正确,来判断是否终止文件上传任务,那么建议使用before-upload(如果返回false,或者promise返回reject,文件上传立即终止,并删除刚添加的文件)。如果需要对提交内容进行验证,根据验证结果做下一步操作,那么使用el-upload的on-change事件。
来源:https://blog.csdn.net/qq_43403676/article/details/126924324
猜你喜欢
- 序言之前封装过一个日志注解,打印方法执行信息,功能较为单一不够灵活,近来兴趣来了,想重构下,使其支持表达式语法,以应对灵活的日志打印需求。该
- 谷歌官方推出了一种侧滑菜单的实现方式(抽屉效果),即 DrawerLayout,这个类是在Support Library里的,需要加上and
- 概述:App几乎都离不开与服务器的交互,本文主要讲解了flutter网络请求三种方式 flutter自带的HttpClient、 第三方库h
- 随着目前微信越来越火,所以研究微信的人也就越来越多,这不前一段时间,我们公司就让我做一个微信公众号中问卷调查发红包功能,经过一段时间的研究,
- 前言 因为自己在做的一个小软件里面需要用到从A-Z排序的ListView,所以自然而然的想到了微信的联系人,我想要的就是那样的效果。本来没
- 我的电脑环境win10vscode 1.36.1vscode安装插件安装完这个插件后会提示你安装 platformIOCore,按照提示安装
- 概述LruCache的核心原理就是对LinkedHashMap的有效利用,它的内部存在一个LinkedHashMap成员变量,值得注意的4个
- 一、判断一个字符串str不为空的方法有:1、str == null;2、"".equals(str);3、str.len
- 如果想实现一个在桌面显示的悬浮窗,用Dialog、PopupWindow、Toast等已经不能实现了,他们基本都是在Activity之上显示
- pom.xml配置<dependency> <groupId>org.springframework.
- Java 方法执行时的动态分派和静态分派是 Java 实现多态的本质背景Java 的动态分派和静态分派也是 Java 方法的执行原理。 Ja
- 一个是新浪微博,腾讯微博的分享按钮,一个是他们的绑定情况(其实就是是否授权)。点击微博分享中新浪或腾讯按钮,就进行相应的授权(若没授权),显
- AndroidStduio3.0使用gradle将module打包jar文件,首先需要安装gradle。打开控制台输入  
- 已经有很多关于 Flutter WebView 的文章了,为什么还要写一篇。两个原因:Flutter WebView 是 Flutter 开
- synchronized都问啥?如果Java面试有什么是必问的,synchronized必定占据一席之地。初出茅庐时synchronized
- 介绍Spring Cache是一个框架,实现了基于注解的缓存功能,只需要简单地加一个注解,就能实现缓存功能。Spring Cache提供了一
- 最近做一个需求,需求中的bean只用于生成一次json使用,所以想通过配置来动态的生成,查了一下,java还真有这个实现。java动态的生成
- 我们编程的过程中大部分使用了很出色的ORM框架,例如:MyBatis,Hibernate,SpringJDBC,但是这些都离不开数据驱动JD
- java 根据经纬度获取地址实现代码实现代码:public class GetLocation { public
- 前2天有读者问到是否有带分页功能的表格控件,今天分页功能的表格控件详细解析。PaginatedDataTablePaginatedDataT