el-upload组件选择文件前先进行逻辑判断

需求:在点击上传时,先判断是否满足上传条件,不满足做对应提示,满足才弹出选择文件框

解决方法:

1.el-upload组件使用【v-show="false"】隐藏起来,组件内插槽的按钮添加【ref】属性,另外使用一个按钮组件处理判断逻辑即可

注:使用的是vue3写法,vue2写法不一样但是同理

<el-button class="handle_btn add" @click="importExcel">导入模板</el-button>
<el-upload  
v-show="false" class="upload-demo" 
v-model:file-list="fileList" :show-file-list="false"
action="#" :http-request="upLoadImgReq">
    <template #trigger>
        <el-button ref="uploadRef" class="handle_btn add">导入模板</el-button>
    </template>
</el-upload>
const importExcel = ()=> {
  //处理判断逻辑
  
  //判断通过,调用el-upload内的按钮点击事件
  uploadRef?.value?.$el.click()
}

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
el-upload组件中,可以通过before-upload属性来进行文件上传前的校验。您可以在该属性的回调函数中进行相应的逻辑处理。根据您的需求,您可以在before-upload回调函数中实现以下步骤: 1. 获取上传的文件。 2. 对文件内容进行校验判断是否存在重复的数据。 3. 如果存在重复的数据,弹窗提示是否覆盖。您可以使用element-ui的MessageBox组件来实现弹窗提示,并在确认后继续上传文件。 4. 如果不存在重复的数据,或者用户取消了覆盖操作,可以通过return false来取消文件的上传。 下面是一个示例代码,演示了如何在el-upload中实现文件内容的校验: ```javascript <el-upload class="upload-demo" action="your-upload-url" :before-upload="handleBeforeUpload" > <el-button type="primary">点击上传</el-button> </el-upload> methods: { handleBeforeUpload(file) { // 根据文件类型进行校验,例如只校验xls和xlsx文件 if (file.type !== 'application/vnd.ms-excel' && file.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') { this.$message.error('只能上传Excel文件'); return false; // 取消文件上传 } // 进行文件内容校验判断是否存在重复的数据 const isDuplicate = this.checkDuplicateData(file); if (isDuplicate) { // 弹窗提示是否覆盖 this.$confirm('文件中存在重复的数据,是否覆盖?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { // 用户确认覆盖,继续上传文件 this.uploadFile(file); }).catch(() => { // 用户取消覆盖,取消文件上传 return false; }); } else { // 不存在重复的数据,直接上传文件 this.uploadFile(file); } }, checkDuplicateData(file) { // 实现文件内容的校验逻辑判断是否存在重复的数据 // ... }, uploadFile(file) { // 调用接口上传文件 // ... } } ``` 在上述示例中,handleBeforeUpload方法用于处理文件上传前的逻辑。其中,checkDuplicateData方法用于校验文件内容是否存在重复的数据,uploadFile方法用于调用接口上传文件。根据您的需求,在checkDuplicateData方法中实现文件内容的校验逻辑即可。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值