Springboot与vue实现文件导入方法具体介绍
作者：进击的Coders 发布时间：2023-10-31 12:31:37
标签：Springboot,文件,导入
一、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
0
投稿猜你喜欢
- C# 获取某个时间的0点0分和23点59分59秒，具体代码如下所示：C#获取当月第一天和最后一天当月第一天0时0分0秒：DateTime.N
1.相关概念Spring Boot 默认为我们提供了静态资源处理，使用 WebMvcAutoConfiguration 中的配置各种属性。建- 1. 全部Activity可继承自BaseActivity，便于统一风格与处理公共事件，构建对话框统一构建器的建立，万一需要整体变动，一处修
- 本文实例讲述了C#实现农历日历的方法。分享给大家供大家参考。具体实现方法如下：//天干 private static
- 本文实例为大家分享了C#截取验证码图片的具体代码，供大家参考，具体内容如下使用Graphics类中的DrawImage方法，这个方法有30种
- 本文实例讲述了C#实现XSL转换的方法。分享给大家供大家参考，具体如下：xsl 可方便的将一种格式的xml，转换成另一种格式的xml，参考下
- 一，FileWritter写入文件FileWritter, 字符流写入字符到文件。默认情况下，它会使用新的内容取代所有现有的内容，然而，当指
- 创建类的对象 = 类的实例化 = 实例化类类和对象的使用（面向对象思想落地的实现）：1.创建类，设计类的成员2.创建类的对象3.通过“对象.
- java模拟实现图书检索系统 (基础版)，供大家参考，具体内容如下练习实现3个简单的功能，没有优化，可以根据需求，自行添加想要实现的功能。B
- Feign Client 超时时间配置不生效解决方案Feign Client 的 connectTimeout 和 readTimeout
- 使用工具：IDEA2022Tomcat9.0.41.下载Tomcat:官网：https://tomcat.apache.org/找到需要的版
- Java super关键字super 关键字与 this 类似，this 用来表示当前类的实例，super 用来表示父类。super 可以用
- yml配置规则属性跟属性值之间使用“:”和一个“空格”隔开，
- 前言今天看到某一篇文章的一句话 单例DCL 前面加 V 。就这句话让我把 单例模式 又仔细看了一遍。Java
- Android 2.3.7.r1 按menu键时会停止录像。改成录像时按menu键不做处理，可做如下修改： 在packages/apps/C
- 背景项目中用到了多数据源，不同的数据源根据业务不同配置在不同的工程中，由maven来统一聚合。但是前几天在开发过程中突然发现项目前台工程的事
- 一、基于 Windows 的标准计时器（System.Windows.Forms.Timer）首先注意一点就是：Windows 计时器是为单
- async和awaitasync微软文档：使用 async 修饰符可将方法、lambda 表达式或匿名方法指定为异步。使
- 过早提升(Premature Promotion)提升速率(promotion rate), 用于衡量单位时间内从年轻代提升到老年代的数据量
- 还记得我们之前说的ListView吗，（这个难用的控件-。+）我们在用他的同时也用到了一个叫做适配器Adapter的东西。一般我们用一个类继
