elementUI文件上传 判断文件类型

Vue 专栏收录该内容
24 篇文章 0 订阅

在用el-upload上传组件的时候需要注意

  1. accept 官网上讲可以控制文件上传的类型,但实际上并不可以 还需要土方法(获取文件后缀名进行判断)进行控制
  2. limit 不是很好用 它虽然限制了文件只能上传一个,但是你选择了一个 就不能再去选择第二个文件,正常情况下测试想要选择第二个,然后最后一个是有效的,这里可以替换一下。
  3. 获取文件的文件流的方法
  4. 在获取完正确文件之后,之前的错误提示信息要删除

文件上传 判断文件类型

html代码

<el-upload action="11" ref="editEnc" :on-remove="editEncFileRemove" :on-change="encFileEdit" :auto-upload="false" accept=".p7b,.cer,.pem">
    <el-button size="small" type="primary" class="btn-upload">导入</el-button>
    <span slot="tip" class="el-upload_tip">支持.p7b、.cer、.pem格式</span>
  </el-upload>

判断文件类型
这种情形是截取最后一个小数点后的字符串来判断文件的类型是否符合p7b,cer,pem中的一种

encFileEdit(file,fileList){
  if(fileList.length>1){      //这里只获取最后一次选择的问津
    fileList.splice(0,1);
  }
  if(fileList.length>0){
    let fileName = fileList[0].name.substring(fileList[0].name.lastIndexOf('.')+1);
    let extension1 = fileName === 'p7b';
    let extension2 = fileName === 'cer';
    let extension3 = fileName === 'pem';
    if(!extension1 && !extension2 && !extension3){
      this.$refs.editEnc.clearFiles();
      this.$notify({
        type:'error',
        title:'提示',
        message:'请导入p7b、cer、pem格式的证书',
      });
      return false;
    }else{
      this.applyInfo.enc_cert_name = fileList[0].raw;
    }
  }
},

  • 2
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值