element-ui el-upload手动上传后台接口、文件上传表单校验解决方法

一、el-upload手动上传后台接口

手动上传后台接口的核心步骤是
1.设置:auto-upload="false"，
2.设置action=""，
3.设置:http-request="uploadDocs"
4.表单提交方法creatMapHandle里通过调用this.$refs.docUpload.submit()，实现底层调用上述3.的uploadDocs方法

  
    点击上传
    
请上传RDF格式文件
  



  确 定
  取 消


creatMapHandle (formName) {
  this.$refs[formName].validate((valid) => {
    if (valid) {
      this.$refs.docUpload.submit() //重点
    } else {
      return false
    }
  })
}

uploadDocs (params) {
  ...
}

二、el-upload文件上传表单校验

文件上传表单校验的核心步骤是
1.设置表单校验核心代码

  
    ...
  
  ...


ruleForm: {
  fileList: []
},
rules: {
  fileList: [
    { required: true, message: '请上传RDF格式文件', trigger: 'change' }
  ]
}

2.设置文件添加列表后钩子函数，钩子函数中将文件数据添加至:file-list="ruleForm.fileList"，然后通过自校验方法隐藏校验提示

:on-change="handleFileChange"

handleFileChange (file, fileList) {
  this.ruleForm.fileList.push(file)
  this.$refs.ruleForm.validateField('fileList')
}