springboot+vue实现excel导入去重

### Spring Boot 和 Vue 实现 Excel 文件导入去重方法

#### 后端逻辑处理 (Spring Boot)

为了确保上传的 Excel 数据不包含重复项，在服务器端可以采用如下方式来验证并过滤掉重复数据：

当接收到前端发送过来的数据后，先将其转换成实体对象列表。对于每一个新读取到的对象实例，通过唯一键（如身份证号、订单编号等）判断该记录是否已经存在于数据库中。

如果存在，则跳过这条记录；反之则保存至数据库内[^1]。

// 假设有一个名为 User 的实体类用于表示表格中的每一行数据
public List<User> importExcel(MultipartFile file) throws IOException {
    // 解析 Excel 并获取所有用户信息
    List<User> userList = EasyPoiUtil.importExcel(file, User.class);
    
    Set<String> uniqueKeys = new HashSet<>();
    List<User> filteredUsers = new ArrayList<>();

    for(User user : userList){
        String key = user.getUniqueKey(); // 获取唯一标识符
        
        if(!uniqueKeys.contains(key)){
            uniqueKeys.add(key);
            filteredUsers.add(user);            
        }
    }

    userRepository.saveAll(filteredUsers);

    return filteredUsers;
}

此代码片段展示了如何利用 `Set` 结构自动排除相同元素的功能来进行简单有效的去重操作。

#### 前端交互设计 (Vue.js)

在页面上提供文件选择器供用户选取要上传的 Excel 文档，并设置一个按钮触发提交动作。一旦点击了这个按钮，就会调用接口向后台传递所选文件的内容以便进一步处理[^2]。

<!-- HTML 部分 -->
<input type="file" id="excelFileInput"/>
<button @click="submit">Submit</button>

// JavaScript/Vue部分
methods: {
    submit() {
      const formData = new FormData();
      let file = document.getElementById('excelFileInput').files[0];
      
      formData.append("file", file);
      
      axios.post('/api/import',formData,{
          headers:{
              'Content-Type':'multipart/form-data'
          }})
           .then(response => console.log(response))
           .catch(error=>console.error(error));
     }
}

上述示例说明了怎样构建基本的表单控件以及相应的事件处理器以支持文件的选择和提交过程。