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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: