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