vue el-upload手动上传实现过程

        ```vue
        <el-upload v-model="xlsFile" ref="fileUpload" :limit="1" accept=".xls, .xlsx" action="#" :multiple="false"
          :auto-upload="false" :before-upload="beforeFileUpload" :on-preview="preview" :on-change="fileChange"
          :http-request="uploadHttpRequest" :on-exceed="exceed" :on-remove="fileRemove" :on-success="fileSuccess">
          <el-button size="small" type="primary">
            导入文件
            <i class="el-icon-upload el-icon--right"></i>
          </el-button>
          <div class="el-upload__tip" style="color: rgba(255, 255, 255, 0.65)" slot="tip">
            提示：仅允许上传多1个".xlsx"或者".xls"格式文件，单个文件最大10M
          </div>
        </el-upload>
         <el-button type="primary" @click="submitUpload()">上传</el-button>

 script部分
```vue
                          // 试题导入
beforeFileUpload(file) {
 const isFileSizeLimit = file.size / 1024 / 1024 < 10;
 if (!isFileSizeLimit) {
   this.$message.error("单个图片大小不能超过 10MB!");
 }
 return isFileSizeLimit;
},
// 文件添加、 上传、 失败
fileChange(file, fileList) {
 this.xlsFile = file;
 console.log("1111111", this.xlsFile);
},
// 文件上传成功处理
fileSuccess(response, file, fileList) {
 // this.openUpload = false;
 // this.isUploading = false;
},
// 预览文件
preview(file) {
 // this.dialogVisible = true;
},
// 文件超出限制
exceed(files, fileList) {
 this.$message.warning(
   `当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${
     files.length + fileList.length
   } 个文件`
 );
},
// 移除文件
fileRemove(file, fileList) {
 this.xlsFile = null;
},
// 点击上传
submitUpload() {
 this.$refs.fileUpload.submit();
},
uploadHttpRequest(param) {
 const formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
 formData.append("file", this.xlsFile.raw); //添加文件对象
 // this.$refs["form"].validate((valid) => {
   // if (valid) {
   //   if (!this.form.id) {
   //     formData.append("passValue", this.form.passValue);
   //     formData.append("scoreEvery", this.form.scoreEvery);
   //     formData.append("testName", this.form.testName);
   //   } else {
   //     formData.append("id", this.form.id);
   //   }
     excelData(formData)
       .then((res) => {
         if (res.code === 200) {
           this.msgSuccess("导入成功");
           console.log('re====>',res.data)
           // this.open = false;
           this.getList();
         }
       })
       .catch((err) => {
         console.log("失败", err);
         param.onError(); //上传失败的文件会从文件列表中删除
       });
   // }
 // });
},

this.$refs.fileUpload.submit();

http-request=“uploadHttpRequest”

<template>
    <el-form
      ref="cardFormRef"
      :model="cardForm"
      :rules="rules"
      label-width="120px"
      class="demo-cardForm"
      status-icon
    >
    <el-form-item label="轮播图" prop="photo">
        <el-upload
          ref="uploadRef"
          :class="{ iconVis: fileList.length }"
          :action="url" //上传接口
          v-model:file-list="fileList"
          :limit="1" //限制上传一张
          list-type="picture-card"  //照片墙
          :before-upload="beforeUpload"  //上传前
          :on-success="handleAvatarSuccess"  //上传成功
          :headers="headers"
          :auto-upload="false"  //手动上传
        >
          <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
  </el-form>
</template>

var fileList = ref([]);
var uploadUrl = ref(false); //存图片成功返回的url
const headers = ref({ Authorization: "Bearer " + getToken() });
var url =import.meta.env.VITE_APP_BASE_API + "接口";
 
var rules = computed(() => ({  //表单校验规则
  photo: [
    {
      required: true,
      message: "请上传图片",
      trigger: "blur",
    },
  ]
}));
 
var beforeUpload = (file) => {
  console.log("上传前");
  const isJPG =
    file.type === "image/jpeg" ||
    file.type === "image/png" ||
    file.type === "image/jpg";
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isJPG) {
    proxy.$modal.msgError("上传图片只能是 JPG/PNG 格式!");
  }
  if (!isLt2M) {
    proxy.$modal.msgError("上传图片大小不能超过 2MB!");
  }
  isJPG && isLt2M ? (uploadUrl.value = true) : (uploadUrl.value = false);
  return isJPG && isLt2M;
};
 
function handleAvatarSuccess(res, file) {
  console.log("成功了！");
  let { url } = res.data;
  uploadUrl.value = url;
  sumbitForm(); //表单提交接口，传uploadUrl
}
 
var cardFormRef=ref(null);
var uploadRef=ref(null);
var sumbit = () => {  //点击确定按钮，进行表单校验，校验成功上传图片
  cardFormRef.value.validate((val) => {
    if (val) {
      console.log("上传图片");
     uploadRef.value.submit();
    }
  });
};