文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Springboot与vue实现文件导入方法具体介绍

2023-02-07 18:00

关注

一、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导出数据,其中遇到坑及总结如下:

到此这篇关于Springboot与vue实现文件导入方法具体介绍的文章就介绍到这了,更多相关Springboot文件导入内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯