解决重复上传excel表格后数据重复项

346 阅读1分钟

解决上传excel表格后数据重复项

//模拟点击(这里是使用自定义上传)  :http-request="uploadFile"
 <el-form-item label="参加人" style="width: 100vw">
              <span style="margin-right: 30px; color: dodgerblue; cursor: pointer" @click="unloadexcel">批量导入</span>

              <!-- 上传组件 -->
              <el-upload ref="upload" style="display: none" action="#" :limit="1" :before-upload="beforeUpload" accept=".xlsx" class="up-class" :on-success="uploadSuccess" :show-file-list="false" :auto-upload="true" :http-request="uploadFile">
                <el-button slot="trigger" size="small" type="primary" class="el-icon-plus el-icon-upload" ref="upbtn">导入数据</el-button>
              </el-upload>
              <span> <i class="el-icon-s-order"></i> <Template /></span>
  </el-form-item>
    //上传之前
    beforeUpload(file) {
      let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      if (extension !== "xlsx") {
        this.$message({
          message: "上传文件只能是 xlsx格式!",
          type: "warning",
        });
        return false;
      }
    },
    //上传
    async uploadFile(file) {
      const formData = new FormData();
      formData.append("excel", file.file);

      const res = await uploadExcel(formData);

      const exportArr = res.list.filter((ele) => {
        return ele.code !== null;
      });

      this.drawerData.join_man.forEach((num) => {
        if (num.name !== "") {
          let arr = [...this.drawerData.join_man, ...exportArr];
 //这段代码的功能是将两个数组`this.drawerData.join_man`和`exportArr`合并,并确保合并后的结果中每个元
 //素的`code`属性都是唯一的。具体实现过程是通过使用`reduce()`方法和一个空对象`newobj`来实现的。
//首先,代码中使用ES6的展开语法`[...this.drawerData.join_man, ...exportArr]`来将两个数组合并为一个新
//的数组`arr`。接着,定义了一个空对象`newobj`用来存储已经出现过的`code`值。然后使用`arr.reduce()`方
//法,初始值为一个空数组`[]`,对`arr`中的每个元素进行处理。对于每个元素,首先判断当前`code`对应的属性值
//在`newobj`中是否存在。如果存在,则不做任何操作,如果不存
//在,则将该元素添加到结果数组`preVal`中,并在`newobj`中标记该`code`对应的属性值已经存在。
//最后,返回合并去重后的结果数组`preVal`即可。
          let newobj = {};
          arr = arr.reduce((preVal, curVal) => {
            newobj[curVal.code] ? "" : (newobj[curVal.code] = preVal.push(curVal));
            return preVal;
          }, []);
          console.log(arr);
          this.drawerData.join_man = arr;

        } else {
          this.drawerData.join_man = [...exportArr];
        }
      });
    },