在vue中如何实现前端导入文件发送给后端进行数据库记录的批量添加_如何通过前端操作而后调用后端向数据库写入数据

需求：在前端导入需要添加的信息的excel表，实现记录的批量插入
效果：

实现过程：

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>
1
2
3
4
5
6
7
8
9
10
11

(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('已取消文件导入操作!')
     }
   }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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+"\"}";
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

注：这里导入的excel文件会自动默认第一行为标题，所以第一行不会算为一条需要导入的记录
导入的文件

导入成功后数据库