vue el-upload 手动上传实现

该博客介绍了如何在Vue项目中使用el-upload组件实现Excel文件的上传,包括设置文件类型限制、大小限制、自定义上传按钮、文件预览、文件移除等功能,并提供了详细的代码示例。同时,它还涵盖了文件上传成功后的处理逻辑和错误处理机制。
摘要由CSDN通过智能技术生成
        ```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”

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值