快捷導(dǎo)航

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

更新時(shí)間：2023年02月07日 15:12:04 作者：進(jìn)擊的Coders

文件導(dǎo)入時(shí)大多數(shù)項(xiàng)目無法回避的問題，這兩天深入學(xué)習(xí)了文件導(dǎo)入，在這里進(jìn)行記錄，使用到的技術(shù)是Springboot+Vue，前端組件使用el-upload

一、Java后端使用MultipartFile

@PostMapping(value = "/upload")
    public String upload(@RequestParam("file") MultipartFile multipartFile) {
        return FileUploadUtil.upload(multipartFile);
    }

如果使用Springboot架構(gòu)，直接使用MultipartFile工具即可，后端拿到MultipartFile對象之后，對其進(jìn)一步處理就能拿到數(shù)據(jù)，或者存入數(shù)據(jù)庫，或者保存到本地都可以。

二、Java后端直接從request中讀取并轉(zhuǎn)換為字符串

	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對象，然后再轉(zhuǎn)換為流的形式，之后使用BufferedReader流讀取器，逐行讀取文件內(nèi)容并添加到字符串構(gòu)造器中，生成字符串。

三、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ìn)行檢驗(yàn)，然后根據(jù)檢驗(yàn)的結(jié)果，對于沖突的實(shí)體，逐項(xiàng)選擇覆蓋已有實(shí)體，或者使用原來實(shí)體，這相對于單純的文件上傳，提高了難度

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>點(diǎn)擊上傳</em>
        </div>
        <div class="el-upload__tip" style="color:red" slot="tip">提示：僅允許導(dǎo)入“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">暫不導(dǎo)入</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">暫不導(dǎo)入</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">暫不導(dǎo)入</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="模型標(biāo)簽" 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">暫不導(dǎo)入</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驗(yàn)證文件內(nèi)容

    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ù)，然后將要導(dǎo)入的code發(fā)送到后端，返回哪些是已有的，然后在前端進(jìn)行覆蓋或者暫不導(dǎo)入的選擇，選擇完成之后點(diǎn)擊確定，攜帶選擇的結(jié)果進(jìn)行導(dǎo)入

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

總結(jié)

這兩天的項(xiàng)目中，學(xué)習(xí)了Java導(dǎo)出數(shù)據(jù)，其中遇到坑及總結(jié)如下：

導(dǎo)出時(shí)響應(yīng)函數(shù)返回值必須為void。
前端也需要進(jìn)行處理，使用vue的this.download()即可。
如果是普通的Springboot架構(gòu)，導(dǎo)入可以直接使用MultipartFile。
如果不能使用MultiPartFile，那么可以使用Part從request.getPart(“fileName”)的方式獲取part，然后進(jìn)一步解析part獲取文件內(nèi)容。
后端可以將讀取到的文件內(nèi)容轉(zhuǎn)換為字符串，使用BufferedRead和StringBuilder即可。
前端可以讀取文件的內(nèi)容，使用FileReader和reader.onload()即可。
如果如果單純驗(yàn)證文件格式、大小或者名稱是否正確，來判斷是否終止文件上傳任務(wù)，那么建議使用before-upload（如果返回false，或者promise返回reject，文件上傳立即終止，并刪除剛添加的文件）。如果需要對提交內(nèi)容進(jìn)行驗(yàn)證，根據(jù)驗(yàn)證結(jié)果做下一步操作，那么使用el-upload的on-change事件。

到此這篇關(guān)于Springboot與vue實(shí)現(xiàn)文件導(dǎo)入方法具體介紹的文章就介紹到這了,更多相關(guān)Springboot文件導(dǎo)入內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: