element ui - 不立即上传

1. 不立即上传，通过点击登录按钮后上传文件和参数

<el-upload
            style="float: left"
            ref="upload"
            action="#"
            accept=".csv"
            :file-list="fileList"
            :auto-upload="false"
            :on-change="handleChange"
          >
            <template #trigger>
              <el-button type="primary"
                ><i class="el-icon-document"></i
                ><span class="icon-title">参照..</span></el-button
              >
            </template>
            <el-button class="login-left" type="danger" @click="handleUpload"
              ><i class="el-icon-edit"></i
              ><span class="icon-title">登録</span></el-button
            >
          </el-upload>

2. onChange 事件把文件赋值给变量，点击上传把文件变量append 到formdata 中

const handleChange = (file, fileList) => {
      if (fileList.length > 1) {
        fileList.splice(0, 1);
      }  // 每次上传显示的都是当前的，只能有一个（不用limit来限制了）
      files.value = file.raw; // 把文件赋值给变量
    };


 const handleUpload = () => {
　　　　// 把文件和参数 append 进去
      const data = new FormData();
      data.append("file", files.value);
      data.append("BrokerId", dataForm.brokerCd);
      data.append("TradeServiceId", dataForm.tradeServiceCd);

      getLogin(data).then((data) => {  // 上传文件的接口url
        if (data.code === 20000) {
          proxy.$http.msgSuccess(proxy.$http.msg("I_COM_0006"));
          proxy.$refs.upload.clearFiles();  // 上传后清空文件
        }
      });
    };

element ui - 不立即上传

推荐阅读