Springboot與vue實現檔案匯入方法具體介紹

2023-02-09 06:01:46

一、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.效果截圖

總結

這兩天的專案中，學習了Java匯出資料，其中遇到坑及總結如下：

匯出時響應函數返回值必須為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事件。

到此這篇關於Springboot與vue實現檔案匯入方法具體介紹的文章就介紹到這了,更多相關Springboot檔案匯入內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！