vue+Element组件上传文件,springboot获取文件进行并插入数据库操作

本文介绍了一个使用Vue和Element UI组件实现文件上传,后端使用SpringBoot接收并处理文件的需求。文件为.txt格式,内容包含特定格式的数组。在前端,通过Element的upload组件上传文件。后端的SpringBoot应用中,通过Bean、Controller、Service和Mapper进行文件的接收和数据库操作。文件处理过程中,将MultipartFile转换为file,读取文件内容时,因数组可能跨行,所以采用逐行读取并拼接后拆分的方式处理数据。
摘要由CSDN通过智能技术生成

*最近有个需求就是在对文件(.txt)进行查库操作,文件里面的数组有一定的格式,但数组间隔没有格式,比如在换行时数组一部分在第一行另一部分在第二行。

在前端用elment的upload组件进行上传。

<template>
  <el-upload
    class="upload-demo"
    action="/export"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    multiple
    :limit="3"
    :on-exceed="handleExceed"
    :file-list="fileList">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
  </el-upload>
</template>
<script>
  export default {
        name: "Login",
      data(){
    return{
      fileList:[]
    }
      },
      methods:{
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePreview(file) {
          console.log(file);
        },
        handleExceed(files, fileList) {
          this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
          return this.$confirm(`确定移除 ${ file.name }?`);
        }
      }
    }
</script>

点击上传
*后端使用的springboot。
bean:

package org.java.convert.bean;

import lombok.Data;
import tk.mybatis.ma
首先,你需要在后端(SpringBoot)写一个接口来从数据库中取出相应的值。假设你的值存储在一个名为"options"的表中,你可以定义一个RestController来实现这个接口: ```java @RestController @RequestMapping("/options") public class OptionController { @Autowired private OptionRepository optionRepository; @GetMapping("/all") public List<Option> getAllOptions(){ return optionRepository.findAll(); } } ``` 这里使用了Spring Data JPA来查询数据库。你需要创建一个名为"Option"的类来映射数据库中的表: ```java @Entity @Table(name = "options") public class Option { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String name; // getters and setters } ``` 现在你可以在前端(Vue+Element)中调用这个接口,并将结果渲染到页面上。你可以使用ElementUI中的多选框组件实现多选功能。假设你已经安装了ElementUI,并且你的Vue组件中有一个名为"selectedOptions"的数组来存储选中的选项,你可以这样写: ```vue <template> <div> <el-checkbox-group v-model="selectedOptions"> <el-checkbox v-for="option in options" :label="option.id" :key="option.id">{{ option.name }}</el-checkbox> </el-checkbox-group> </div> </template> <script> import axios from 'axios' export default { name: 'MyComponent', data(){ return { options: [], selectedOptions: [] } }, mounted(){ axios.get('/options/all') .then(res => { this.options = res.data }) } } </script> ``` 这里使用了axios来调用后端接口,获取所有的选项。然后将选项渲染到多选框组件中,当用户勾选选项时,Vue会自动将选中的选项的id存储到"selectedOptions"数组中。你可以在表单提交时将"selectedOptions"数组传回后端,处理选中的选项。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值