本文共 6116 字，大约阅读时间需要 20 分钟。

实现导入功能主要还是使用 Ant Design Vue 中的 upload 样式组件

一) 前端实现

这段代码中 a-upload 标签实在你项目中引入了 Ant Design Vue UI库的支持下使用的一个导入组件

   	
    
     导入
    
   

1) 属性定义

将上面自定义的属性在data中定义好

export default {
   	data() {
   		return {
   			// 导入excel时的icon图标      		uploadIcon: 'to-top',      		// 导入excel时是否禁用上传按钮      		uploadDisabled: false		}	}}

2) 方法实现

自定义实现方法，参数 data 就是上传文件的信息

/**	     * 自定义导入文件方法	     * @param data 上传的 excel 文件	     */	    customRequest(data) {
   	      const file = data.file; // 需要上传的 excel 文件	      const formData = new FormData();	      formData.append('file', file);	      data.onProgress();	      batchImportGetRecord(formData).then(res => {
   	        if (res) {
   	          this.$message.success('导入成功');	        } else {
   	          this.$message.error('导入失败');	        }	      }).finally(() => {
   	        this.switchIconAndStatus(false);	      });	    }

上传中、完成、失败都会调用这个函数。

/**	     * 导入功能的 change 事件	     * @param data 上传文件过程中的文件状态信息	     */	    customChange(data) {
   	      if (data.file.status === 'uploading') {
   	        this.switchIconAndStatus(true);	      } else if (data.file.status === 'done') {
   	        this.switchIconAndStatus(false);	      } else if (data.file.status === 'error') {
   	        this.switchIconAndStatus(false);	      }	    }

按照程序设计，重复代码过多就需要进行封装，方便使用

/**	     * 导入按钮的图片和状态切换	     * @param flag 根据此标识来区分正在导入还是导入成功或未导入的图标及禁用情况	     */	    switchIconAndStatus(flag) {
   	      if (flag) {
   	        this.uploadIcon = 'loading';	        this.uploadDisabled = true;	      } else {
   	        this.uploadIcon = 'to-top';	        this.uploadDisabled = false;	      }	    }

二) 后端实现

1) 控制层 Controller 实现

后台接口，图片上传请求默认为 post 请求，通过 MultipartFile 类型接收上传的文件，注意这里的 @RequestParam("file") 括号里的参数要和前端上传的名称一致，不一致的情况就是后台接收不到参数

@PostMapping(value = "import")    public Boolean importExcelData(@RequestParam("file") MultipartFile file) {
           return studentService.importExcelData(file);    }

2) 服务层 Service 实现

这里举例导入一个学生信息表 excel 文件

@Override    public boolean importExcelData(MultipartFile file) {
           List
   
     list = new ArrayList
    
     ();        Student student = null;        try {
           	// 通过文件输入流读取到对应的 workbook 工作簿            XSSFWorkbook workbook = new XSSFWorkbook(file.getInputStream());            // 只解析第一张 sheet 工作表            XSSFSheet sheet = workbook.getSheetAt(0);             // 遍历第一个工作表的所有行            for (int i = 0; i < sheet.getPhysicalNumberOfRows(); i++) {
                   if (i == 0) continue; // 跳过标题行                                XSSFRow row = sheet.getRow(i); // 获取工作表中的某一行，通过下标获取                if (row == null) continue; // 跳过空行                // 构造要批量插入的Student对象                student = new Student();					// 遍历一个行中的所有列                for (int j = 0; j < row.getPhysicalNumberOfCells(); j++) {
                       XSSFCell cell = row.getCell(j); // 获取一行中的某个单元格，通过下标获取                    if (cell == null) continue; // 跳过空单元格                    // 获取单元格中的字符串内容                    String cellValue = cell.getStringCellValue();                    // 获取单元格中的数字内容	                double cellValue2 = cell.getNumericCellValue();                    // 判断单元格是第几个，从零开始                    switch (j) {
                           case 0: // 第一列就是姓名                        	student.setName(cellValue); // 给实体类的setter属性赋值                            break;                        case 1: // 年龄                        	student.setAge(cellValue2);                            break;                        case 2: // 爱好                        	student.setHobby(cellValue);                            break;                        case 3: // 家庭地址                        	student.setAddress(cellValue);                            break;                        case 4: // 出生日期                        	// 如果没有特意去定义 excel 中的日期，那么获取到的日期就是字符串类型                        	// 这里将字符串日期转换为日期格式 LocalDateTime 或 Date                        	// 1. 将日期转换为 LocalDateTime                        	// LocalDateTime time = LocalDateTime.parse(cellValue, DateTimeFormatter.ofPattern("yyyy年M月d日HH:mm:ss"));                        	// 2. 将日期转换为 Date                         	SimpleDateFormat sdf = new SimpleDateFormat("yyyy年M月d日HH:mm:ss");                            Date date = sdf.parse(cellValue);                            student.setBirthday(date);                            break;                    }                }                list.add(student);            }            // 做一下批量添加学生信息的操作即可，这里使用 MyBatis-Plus 提供的方法进行批量新增            studentService.saveBatch(list);            return true;        } catch (Exception e) {
               e.printStackTrace();            System.err.println("导入失败");            TransactionAspectSupport.currentTransactionStatus().setRollbackOnly(); // 手动回滚代码            return false;        }    }
    
   

代码解释：

• 通过 file.getInputStream() 构建一个 workbook
• work.getSheetAt(index) 通过此方法获取工作表，通过索引来获取，索引从零开始
• sheet.getPhysicalNumberOfRows() 方法可以获取 sheet 工作表中的所有行的数量
• sheet.getRow(下标) 通过下标获取对应的行，下标都是从零开始
• row.getPhysicalNumberOfCells() 方法可以获取到一行中所有单元格的数量
• row.getCell(下标) 通过下标获取对应的单元格，下标都是从零开始
• cell.getStringCellValue() 此方法用于获取单元格中为字符串类型的内容值，相关的方法有多种，可以获取 Boolean，日期类型，数字类型等....
  
• 最后经过读取所有内容后将单元格内容一行行的读取设置到 实体类中，并将实体类经过每次循环都添加到 list 集合中，最后通过批量插入表的操作给插入到数据库中，比起来一条条的插入，批量插入明显效率更高，因为后台请求数据库也是在消耗网络资源，中间一去一回也是浪费时间，而批量插入明显网络资源消耗的更少。
• TransactionAspectSupport.currentTransactionStatus().setRollbackOnly() 添加事务后，当导入失败的时候，可以通过异常块中的代码进行代码回滚操作。

转载地址：http://wxqwi.baihongyu.com/