vue el-upload 常见问题解决

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

文件个数限制

html代码如上个html代码
官网上有limit属性，使用方法如下

但是在使用的时候我们会发现加了这个属性，可以实现只选择一个文件，但是用户体验感比较差，如果选错了就要删除，而不是直接再选一次。
这时候我们可以不用这个属性 在代码里加一个判断

encFileEdit(file,fileList){
  if(fileList.length>1){      //这里只获取最后一次选择的文件
    fileList.splice(0,1);
  }
  if(fileList.length>0){     //如果有文件的情况下获取文件流
	 this.applyInfo.enc_cert_name = fileList[0].raw;
  }
},

获取文件流

this.applyInfo.enc_cert_name = fileList[0].raw;

清空文件上传列表

清除ref属性为editEnc的元素 执行clearFiles()方法，清空已上传的文件列表（该方法不支持在 before-upload 中调用）

this.$refs.editEnc.clearFiles();

选择文件之后清除之前Item错误信息

html代码

<el-form-item label="签名证书" prop="sign_cert_name" :label-width="formLabelWidth" ref="editFormSign">
  <el-upload action="11" ref="editSign" :on-remove="editSignFileRemove" :on-change="signFileEdit" :auto-upload="false" accept=".p7b,.cer">
    <el-button size="small" type="primary" class="btn-upload">导入</el-button>
    <span slot="tip" class="el-upload_tip">支持.p7b、.cer格式</span>
  </el-upload>
</el-form-item>

因为错误信息是item的，所以我们只需要获取到item元素然后清除他的错误提示就行了

this.$refs.editEnc.clearValidate();