```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(); //上传失败的文件会从文件列表中删除
       });
   // }
 // });
},

把el-upload里的自动上传auto-upload置为false,然后自定义上传按钮,调用this.$refs.fileUpload.submit();便会触发 :http-request=“uploadHttpRequest”

Logo

前往低代码交流专区

更多推荐