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

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

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

<el-form-item label="导入数据" prop="fileList" v-if="handleOpraName !== '编辑图谱'">
  <el-upload
    :http-request="uploadDocs"
    action=""
    :auto-upload="false"
    ref="docUpload"
    accept=".rdf"
    :file-list="ruleForm.fileList"
    :on-change="handleFileChange"
    :limit="1"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip" style="font-size:14px;padding-left:20px;display:inline-block;">请上传RDF格式文件</div>
  </el-upload>
</el-form-item>

<span slot="footer" class="dialog-footer">
  <el-button type="primary" @click="creatMapHandle('ruleForm')">确 定</el-button>
  <el-button @click="cancelGraphOpra">取 消</el-button>
</span>

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

uploadDocs (params) {
  ...
}

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

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

<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
  <el-form-item label="导入数据" prop="fileList" v-if="handleOpraName !== '编辑图谱'">
    ...
  </el-form-item>
  ...
<el-form>

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')
}