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(); // 上传后清空文件 } }); };