elementUI文件上传 判断文件类型

在用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;
    }
  }
},

猜你喜欢

转载自blog.csdn.net/Alive_tree/article/details/105584095