在vue中如何实现前端导入文件发送给后端进行数据库记录的批量添加

2023年1月2日 68次阅读 来源: 追，，诺

需求：在前端导入需要添加的信息的excel表，实现记录的批量插入
效果：
《在vue中如何实现前端导入文件发送给后端进行数据库记录的批量添加》

实现过程：

1、前端

(1)前端UI

 <div class="text-h2 pa-12">
   <a  href="这里填写你的文件路径(注：在vue项目中这个文件的路径需要放在你的此vue文件的同级目录下，否则可能找不到文件，且文件名最好不要有中文)" download="法律信息导入模板(此处为下载文件的命名).xlsx">点击下载法律信息导入模板</a>
   <v-file-input
         id="mulinput"
         show-size
         accept=".xls,.xlsx"
         label="点击选择文件，文件格后缀为：.xls、.xlsx"
   ></v-file-input>
   <br>
   <v-btn  color="#3CB371" style="color:white;" @click="uploadFile">确认导入</v-btn>
 </div>

(2)前端js
前后端分离使用async…await…进行异步请求，这里使用的是vue-axios,在main.js中引入配置即可

async uploadFile () { 
   if (document.getElementById('mulinput').files[0] === undefined) { 
     alert('请先选择需要导入的文件!')
   } else { 
     var formData = new window.FormData()
     formData.append('file', document.getElementById('mulinput').files[0])
     if (confirm('是否确认导入') === true) { 
       const {  data: fileres } = await this.$http.post('/lawuploadexcel(此处填写你后端接口的路径)', formData)
       if (fileres.res === 'true') { 
         alert('导入成功')
       } else { 
         alert('导入数据失败，请查看表格格式是否正确!')
       }
     } else { 
       alert('已取消文件导入操作!')
     }
   }
 }

2、后台接口部分

// 使用文件批量导入法律信息
@PostMapping("/lawuploadexcel")
@ResponseBody
public String lawupload(MultipartFile file) throws IOException, InvalidFormatException { 
    // 拿到上传的excel表
    BufferedInputStream bis = new BufferedInputStream(file.getInputStream());
    Workbook workbook = WorkbookFactory.create(bis);
    // 获取sheet工作表，这里我的 表名为law
    Sheet sheet = workbook.getSheet("law");
    // 获取表总行数
    int num = sheet.getLastRowNum();
    // 逐行执行插入语句
    System.out.println(num);
    for (int i = 1; i<=num; i++){ 
        Row row = sheet.getRow(i);
        // 获取每一列的数据
        Cell cell1 = row.getCell(0);
        // 这里需要将表数据转化为String类型
        cell1.setCellType(CellType.STRING);
        Cell cell2 = row.getCell(1);
        cell1.setCellType(CellType.STRING);
        Cell cell3 = row.getCell(2);
        cell1.setCellType(CellType.STRING);
        // 去除导入文件中的空白行
        if (cell1.getStringCellValue().equals("")){ 
            break;
        }else { 
            Calendar now = Calendar.getInstance();
            law laws = new law();
            laws.setLawtitle(cell1.getStringCellValue());
            laws.setLawcontext(cell2.getStringCellValue());
            laws.setLauthor(cell3.getStringCellValue());
             // 向数据库插入法律信息，lawservices.addlaw是我写的将数据插入数据库的方法
            String res = lawservices.addlaw(laws);
        }
    }
    return "{\"res\":\""+true+"\"}";
}

注：这里导入的excel文件会自动默认第一行为标题，所以第一行不会算为一条需要导入的记录
导入的文件
《在vue中如何实现前端导入文件发送给后端进行数据库记录的批量添加》
《在vue中如何实现前端导入文件发送给后端进行数据库记录的批量添加》

导入成功后数据库
《在vue中如何实现前端导入文件发送给后端进行数据库记录的批量添加》

    原文作者：追，，诺
    原文地址: https://blog.csdn.net/weixin_46329670/article/details/121885149
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞