vue3+element-plus的el-upload上传excel表格

1.drag使用拖拽功能，:before-upload="beforeUpload"上传文件之前的钩子函数，img是展示上传文件成功展示图标的，此时的imgs是等于false，上传成功就是ture展示图片

<el-upload
          class="upload"
          http-request="#"
          drag
          :before-upload="beforeUpload"
          :http-request="uploadHttpRequest"
        >
          <div class="img_box" v-if="imgs">
            <img src="../../../../assets/img/excel-ext.png" />
          </div>
          <span class="box_text">导入</span>
        </el-upload>

2.获取到上传文件进行校验是否是excel文件，拿到file点击确定按钮可进行调接口上传

 //上传文件之前先判断该文件是否是Excel文件
      beforeUpload(file) {
        //获取上传文件
        let formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
        formData.append("file", file); //添加文件对象
        state.formData = formData;
        const Xls = file.name.split(".");
        if (Xls[1] === "xls" || Xls[1] === "xlsx" || Xls[1] === "csv") {
          state.imgs = true; //打开图片
          return file;
        } else {
          // ElMessage.error("请上传excel格式的文件!");
          return false;
        }
      },

//确定导入未使用信息
onSubmit() {
        ruleFormRef.value.validate((valid) => {
          if (valid) {
            unitregisterImport(state.unitId, state.formData).then((res) => {
              if (res == true) {
                state.innerVisible = true;
                methods.getDetails();
                // ElMessage.success("导入成功");
              } else {
                // ElMessage.warning("导入失败");
              }
            });
          } else {
            return false;
          }
        });
      },

3.上面是点击按钮上传，也可以不需要按钮在获取到flie的时候直接调接口上传，这是业务逻辑操作根据个人业务场景参考

//上传文件之前先判断该文件是否是Excel文件
      beforeUpload(file) {
        const Xls = file.name.split(".");
        if (Xls[1] === "xls" || Xls[1] === "xlsx" || Xls[1] === "csv") {
          state.imgs = true; //打开图片
          return file;
        } else {
          // ElMessage.error("请上传excel格式的文件!");
          return false;
        }
      },
      // 允许自行实现上传文件的请求
       uploadHttpRequest(param) {
         let formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
         formData.append("file", param.file); //添加文件对象
         state.formData = formData;
//调用上传接口
        unitregisterImport(state.unitId, state.formData).then((res) => {
              if (res == true) {
                state.innerVisible = true;
                methods.getDetails();
                // ElMessage.success("导入成功");
              } else {
                // ElMessage.warning("导入失败");
              }
            });

       },

效果图如下：

还未导入文件

导入之后