Upload手动上传文件

 Upload上传文件有两种方式：

1、自动上传，即在选择文件后就立即调用后台接口；

        自动上传需要在action中写入请求接口，然后再方法里面写入回调函数即可

2、手动上传，即在选择好文件之后不会立即上传，需要再点击确定按钮之后再调用接口；

一、HTML页面，使用的事Element Plus里面的Upload组件

  <el-dialog
    v-model="showUpload"
    width="30%"
    title="标题"
    @close="closeFiles"
  >
    <div class="file-content">
      <div class="file-handle">
        <--
            auto-upload  是否自动上传文件
            file-list    默认上传文件
            on-change    文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
            on-success   文件上传成功时的钩子
            on-error     文件上传失败时的钩子
         -->
        <el-upload
          ref="excelFile"
          action="#"
          accept=".xls,.xlsx"
          :auto-upload="false"
          :file-list="fileList"
          :on-change="fileChange"
          :on-success="uploadSuccess"    
          :on-error="uploadError"
        >
          <div class="file-text">
            <el-button type="primary">点击上传</el-button>
            <span @click.prevent="getFile">下载模板文件</span>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              Tips：仅支持上传.xls或.xlsx格式的excel文件
            </div>
          </template>
        </el-upload>
      </div>
    </div>
    <template #footer>
      <span>
        <el-button type="primary" @click="okBtn">确定</el-button>
      </span>
    </template>
  </el-dialog>

二、下面便是实现手动上传文件主要的逻辑代码

<script lang="ts">
export default defineComponent({
    data() {
        return{
           showUpload: false,
           fileList: [],    //
           file: "",
        }
    },
    methods: {
    //上传成功时的钩子
    uploadSuccess(res) {
      if (res.data.code === 0) {
        ElMessage({
          type: "success",
          message: res.data.msg,
        });
        //上传完成后刷新页面
      } else {
        ElMessage({
          type: "error",
          message: res.data.msg || "导入失败",
        });
      }
    },
    // 下载模板文件
    getFile() {
      top.window.open( `下载模板文件的url地址` );
    },
    //手动点击确认上传
    okBtn() {
      let fs = new FormData();
      fs.append("file", this.file);
      axios({
        method: "POST",
        headers: { "Content-Type": "multipart/form-data" },
        url: "文件上传请求的url地址",
        data: fs,
      }).then((res) => {
        this.uploadSuccess(res);
      });
      this.showUpload = false;
    },

    //监听文件变化时的钩子-----实现单个文件上传
    fileChange(file, fileList) {
      //校验上传文件类型
      const fileType = file.name.substring(file.name.lastIndexOf("."));
      if (fileType != ".xls" && fileType != ".xlsx") {
        ElMessage({
          type: "error",
          message: "请选择'.xlsx,.xls'文件",
        });
        this.fileList = [];
      }
        //只允许上传单个文件
      if (fileList.length > 1) {
        fileList.splice(0, 1);
      }
      this.file = file.raw;
    },
  }
})

</script>

附：

export function importnexcel(params: object): Promise<any> {
    return post({
        url: `url`,
        data: params
    });
}

      async okBtn() {
        if(!this.file){
              ElMessage({
                message: "请选择上传文件！",
                type: "warning",
              });
          return
        }
        let fs = new FormData();
        fs.append("file", this.file);
        let res = await importnexcel(fs) //importnexcel上传接口api
        if (res.code === 0) {
              ElMessage({
                message: "上传成功",
                type: "success",
              });
            } else {
              ElMessage({
                message: res.msg || "上传失败",
                type: "error",
              });
            }
        this.showUploadModal = false;
      },