前端如何实现excel文件上传到服务器

 我的需求是，用户上传文件后，不自动上传到后台，需要另外点击上传按钮后再上传到后台

//EXCEL批量导入接口封装
export function uploadAPI(data) {
  return request({
    url: "/maintePollItem/uploadAPI",
    method: "post",
    data,
    headers: {
      "Content-Type": "multipart/form-data",//修改请求头为formData格式
    },
  });
}

          
            
              
                
                
              
            
            

              
                
                
              
            
          
 上传
 取消

const isUpload = ref(false); //上传文件ref
const uploadDisabled = ref(true); //上传文件弹框禁用
//上传文件不自动走接口 点击按钮后上传
const confirmUpload = () => {
  upload.value.submit();
};
//覆盖默认的 Xhr 行为，自行实现上传文件的请求
const httpRequest = (item) => {
  let param = {
    create_staff: userInfo.staffName,
    type_id: form.type_id,
  };
  let formData = new FormData();
  //获取上传文件
  formData.append("file", item.file); //添加文件对象
  formData.append("json", JSON.stringify(param)); //添加文件对象
  const loading = ElLoading.service({
    lock: true,
    text: "加载中",
    background: "rgba(0, 0, 0, 0.7)",
  });
  uploadAPI(formData)
    .then((res) => {
      loading.close();
      if (res.Result_code == 200) {
        ElMessage({
          message: "导入细项成功",
          type: "success",
        });
      } else if (res.Result_code == 400) {
        ElMessage({
          message: res.Result_msg,
          type: "warning",
        });
      } else {
        ElMessage({
          message: "导入细项失败，请稍后再试",
          type: "warning",
        });
      }
    })
    .catch(() => {
      loading.close();
      ElMessage({
        message: "导入细项失败，请稍后再试",
        type: "warning",
      });
    });
};
//上传文件之前的钩子 若返回false或者返回 Promise 且被 reject，则停止上传
const beforeUpload = (file) => {
  const Xls = file.name.split(".");
  if (Xls[1] !== "xls" && Xls[1] !== "xlsx") {
    ElMessage({
      message: "请上传excel格式的文件!",
      type: "error",
    });
    return false;
    
  }else if (file.size / 1024 / 1024 > 250) {
    ElMessage({
      message: "请上传250M以下的文件!",
      type: "error",
    });
    return false;
  }
 return true;
};
//用户需要先选择类型 才能上传，否则 上传功能是禁用的
const selectChange = (value, label, toNull) => {
  console.log(value, label);
   if (label === "上传细项分类") {
    uploadDisabled.value = false;
  } 
}
//取消上传 修改上传功能为禁用
const cancelUpload = () => {
  uploadDisabled.value = true;
  form.type_id = "";
};