欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Springboot與vue實現(xiàn)文件導入方法具體介紹

 更新時間:2023年02月07日 15:12:04   作者:進擊的Coders  
文件導入時大多數(shù)項目無法回避的問題,這兩天深入學習了文件導入,在這里進行記錄,使用到的技術是Springboot+Vue,前端組件使用el-upload

一、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)合查詢

    這篇文章主要介紹了mybatis如何使用Criteria的and和or進行聯(lián)合查詢,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2021-12-12
  • java 中動態(tài)代理詳解及實例

    java 中動態(tài)代理詳解及實例

    這篇文章主要介紹了java 中動態(tài)代理詳解及實例的相關資料,需要的朋友可以參考下
    2017-06-06
  • Java通過URL獲取公眾號文章生成HTML的方法

    Java通過URL獲取公眾號文章生成HTML的方法

    這篇文章主要介紹了Java通過URL獲取公眾號文章生成HTML的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-12-12
  • Spring Security6配置方法(廢棄WebSecurityConfigurerAdapter)

    Spring Security6配置方法(廢棄WebSecurityConfigurerAdapter)

    本文主要介紹了Spring Security6配置方法(廢棄WebSecurityConfigurerAdapter),就像文章標題所說的,SpringSecurity已經(jīng)廢棄了繼承WebSecurityConfigurerAdapter的配置方式,下面就來詳細的介紹一下,感興趣的可以了解一下
    2023-12-12
  • mybatis存在更新不存在新增問題

    mybatis存在更新不存在新增問題

    這篇文章主要介紹了mybatis存在更新不存在新增問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-08-08
  • Java二叉樹中LCA問題解決方法兩則

    Java二叉樹中LCA問題解決方法兩則

    這篇文章主要介紹了Java二叉樹中LCA問題解決方法,總的來說這并不是一道難題,那為什么要拿出這道題介紹?拿出這道題真正想要傳達的是解題的思路,以及不斷優(yōu)化探尋最優(yōu)解的過程。希望通過這道題能給你帶來一種解題優(yōu)化的思路
    2022-12-12
  • Springboot es包版本異常解決方案

    Springboot es包版本異常解決方案

    這篇文章主要介紹了springboot 項目依賴 es包版本異常,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-03-03
  • springboot整合SSE的項目實踐

    springboot整合SSE的項目實踐

    SSE是一種可以主動從服務端推送消息的技術,本文主要介紹了springboot整合SSE的項目實踐,具有一定的參考價值,感興趣的可以了解一下
    2023-09-09
  • ElasticSearch創(chuàng)建后索引修改數(shù)據(jù)類型方法步驟

    ElasticSearch創(chuàng)建后索引修改數(shù)據(jù)類型方法步驟

    Elasticsearch存儲數(shù)據(jù)之前需要先創(chuàng)建索引,類似于結構型數(shù)據(jù)庫建庫建表,創(chuàng)建索引時定義了每個字段的索引方式和數(shù)據(jù)類型,這篇文章主要給大家介紹了關于ElasticSearch創(chuàng)建后索引修改數(shù)據(jù)類型的方法步驟,需要的朋友可以參考下
    2023-09-09
  • Java實現(xiàn)二維碼功能的實例代碼

    Java實現(xiàn)二維碼功能的實例代碼

    今天這篇文章,主要是利用Java實現(xiàn)二維碼功能,本文思路清晰,需要的朋友參考下
    2017-02-02

最新評論