vue-admin-template员工管理之excel导入

1.弹出文件选择器

利用dom触发单击事件,使用ref属性引用input元素，ref值比如为excel-upload-input

// 弹出文件选择器-只有一种方式 通过input file
handleUpload() {
    this.$refs['excel-upload-input'].click() // this.$refs.属性名 和 this.$refs[属性名] 等价
}

2.vue绑定该事件handleUpload

<input
          ref="excel-upload-input"
class="excel-upload-input"
        type="file"
        accept=".xlsx, .xls"
        >
<span>将文件拖到此处或
<el-button type="text" @click="handleUpload">点击上传</el-button>
</span>

3.调用api接口导入excel

在input上绑定事件

<input
          ref="excel-upload-input"
class="excel-upload-input"
        type="file"
        accept=".xlsx, .xls"
@change="uploadChange"
        >

async uploadChange(event) {
    console.log(event.target.files)
    // 调用上传接口
    // uploadExcel() // 参数  form-data 需要文件file
  const files = event.target.files // input的文件列表
    if (files.length > 0) {
        // 大于0 说明有文件要上传
    const data = new FormData()
        // file: file类型
        data.append('file', files[0]) // 将文件参数加入到formData中
        try {
            await uploadExcel(data)
                    // 成功
                    this.$emit('uploadSuccess') // 通知父组件 我上传成功
            this.$emit('update:showExcelDialog', false) // 关闭弹层
            // this.$refs['excel-upload-input'].value = ''
        } catch (error) {
            // 捕获失败
            // this.$refs['excel-upload-input'].value = ''
        } finally {
            // 不论成功或者失败都会执行finally
            this.$refs['excel-upload-input'].value = ''
        }
    }
}

api.js

    /**
     * 上传用户的excel
     *
     */
    export function uploadExcel(data) {
    return request({
            url: '/employee/import',
            method: 'post',
            data // form-data类型 因为要上传文件类型
  })
}

父组件添加事件@uploadSuccess监听子组件，则子组件可触发@uploadSuccess

<!-- 放置导入组件 -->
<import-excel :show-excel-dialog.sync="showExcelDialog" @uploadSuccess="getEmployeeList" />

清空文件选择器

this.$refs['excel-upload-input'].value = ''

4.后端

导入excel表格时，单元格要设置相应格式

/**
 * 导入Excel，添加用户
 *  文件上传：springboot
 */
@RequestMapping(value="/import",method = RequestMethod.POST)
public Result<String> importUser(@RequestParam(name="file") MultipartFile file) throws Exception {
    //1.解析Excel
    //1.1.根据Excel文件创建工作簿
    Workbook wb = new XSSFWorkbook(file.getInputStream());
    //1.2.获取Sheet
    Sheet sheet = wb.getSheetAt(0);//参数：索引
    //1.3.获取Sheet中的每一行，和每一个单元格
    //2.获取用户数据列表
    List<Employee> list = new ArrayList<>();
    System.out.println(sheet.getLastRowNum());
    for (int rowNum = 1; rowNum<= sheet.getLastRowNum() ;rowNum ++) {
        Row row = sheet.getRow(rowNum);//根据索引获取每一个行
        Object [] values = new Object[row.getLastCellNum()];
        for(int cellNum=0;cellNum< row.getLastCellNum(); cellNum ++) {
            Cell cell = row.getCell(cellNum);
            Object value = getCellValue(cell);
            values[cellNum] = value;
        }
        Employee user = new Employee();


        user.setName((String) values[0]);
        user.setUsername((String) values[1]);
        user.setPassword("123456");
        user.setPhone(values[2].toString());
        user.setSex(values[3].toString());
        user.setIdNumber((String) values[4]);
        user.setStatus(values[5].toString());
        list.add(user);
    }
    //3.批量保存用户
    employeeService.saveBatch(list);

    return Result.success("success");
}
public static Object getCellValue(Cell cell) {
    //1.获取到单元格的属性类型
    CellType cellType = CellType.forInt(cell.getCellType());
    //2.根据单元格数据类型获取数据
    Object value = null;
    switch (cellType) {
        case STRING:
            value = cell.getStringCellValue();
            break;
        case BOOLEAN:
            value = cell.getBooleanCellValue();
            break;
        case NUMERIC:
            if(DateUtil.isCellDateFormatted(cell)) {
                //日期格式
                value = cell.getDateCellValue();
            }else{
                //数字
                value = cell.getNumericCellValue();
            }
            break;
        case FORMULA: //公式
            value = cell.getCellFormula();
            break;
        default:
            break;
    }
    return value;
}