Springboot與vue實現(xiàn)文件導入方法具體介紹
一、Java后端使用MultipartFile
@PostMapping(value = "/upload") public String upload(@RequestParam("file") MultipartFile multipartFile) { return FileUploadUtil.upload(multipartFile); }
如果使用Springboot架構,直接使用MultipartFile工具即可,后端拿到MultipartFile對象之后,對其進一步處理就能拿到數(shù)據(jù),或者存入數(shù)據(jù)庫,或者保存到本地都可以。
二、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中根據(jù)名稱獲取到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
由于要求在上傳之前進行檢驗,然后根據(jù)檢驗的結果,對于沖突的實體,逐項選擇覆蓋已有實體,或者使用原來實體,這相對于單純的文件上傳,提高了難度
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="數(shù)據(jù)模型" 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數(shù)據(jù),然后將要導入的code發(fā)送到后端,返回哪些是已有的,然后在前端進行覆蓋或者暫不導入的選擇,選擇完成之后點擊確定,攜帶選擇的結果進行導入
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.效果截圖
總結
這兩天的項目中,學習了Java導出數(shù)據(jù),其中遇到坑及總結如下:
- 導出時響應函數(shù)返回值必須為void。
- 前端也需要進行處理,使用vue的this.download()即可。
- 如果是普通的Springboot架構,導入可以直接使用MultipartFile。
- 如果不能使用MultiPartFile,那么可以使用Part從request.getPart(“fileName”)的方式獲取part,然后進一步解析part獲取文件內容。
- 后端可以將讀取到的文件內容轉換為字符串,使用BufferedRead和StringBuilder即可。
- 前端可以讀取文件的內容,使用FileReader和reader.onload()即可。
- 如果如果單純驗證文件格式、大小或者名稱是否正確,來判斷是否終止文件上傳任務,那么建議使用before-upload(如果返回false,或者promise返回reject,文件上傳立即終止,并刪除剛添加的文件)。如果需要對提交內容進行驗證,根據(jù)驗證結果做下一步操作,那么使用el-upload的on-change事件。
到此這篇關于Springboot與vue實現(xiàn)文件導入方法具體介紹的文章就介紹到這了,更多相關Springboot文件導入內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
mybatis如何使用Criteria的and和or進行聯(lián)合查詢
這篇文章主要介紹了mybatis如何使用Criteria的and和or進行聯(lián)合查詢,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2021-12-12Spring Security6配置方法(廢棄WebSecurityConfigurerAdapter)
本文主要介紹了Spring Security6配置方法(廢棄WebSecurityConfigurerAdapter),就像文章標題所說的,SpringSecurity已經(jīng)廢棄了繼承WebSecurityConfigurerAdapter的配置方式,下面就來詳細的介紹一下,感興趣的可以了解一下2023-12-12ElasticSearch創(chuàng)建后索引修改數(shù)據(jù)類型方法步驟
Elasticsearch存儲數(shù)據(jù)之前需要先創(chuàng)建索引,類似于結構型數(shù)據(jù)庫建庫建表,創(chuàng)建索引時定義了每個字段的索引方式和數(shù)據(jù)類型,這篇文章主要給大家介紹了關于ElasticSearch創(chuàng)建后索引修改數(shù)據(jù)類型的方法步驟,需要的朋友可以參考下2023-09-09