一腾誉、el-upload手動(dòng)上傳后臺(tái)接口
手動(dòng)上傳后臺(tái)接口的核心步驟是
1.設(shè)置:auto-upload="false"，
2.設(shè)置action=""组砚，
3.設(shè)置:http-request="uploadDocs"
4.表單提交方法creatMapHandle里通過(guò)調(diào)用this.$refs.docUpload.submit()吻商，實(shí)現(xiàn)底層調(diào)用上述3.的uploadDocs方法
<el-form-item label="導(dǎo)入數(shù)據(jù)" 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">點(diǎn)擊上傳</el-button>
<div slot="tip" class="el-upload__tip" style="font-size:14px;padding-left:20px;display:inline-block;">請(qǐng)上傳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() //重點(diǎn)
} else {
return false
}
})
}
uploadDocs (params) {
...
}
二、el-upload文件上傳表單校驗(yàn)
文件上傳表單校驗(yàn)的核心步驟是
1.設(shè)置表單校驗(yàn)核心代碼
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
<el-form-item label="導(dǎo)入數(shù)據(jù)" prop="fileList" v-if="handleOpraName !== '編輯圖譜'">
...
</el-form-item>
...
<el-form>
ruleForm: {
fileList: []
},
rules: {
fileList: [
{ required: true, message: '請(qǐng)上傳RDF格式文件', trigger: 'change' }
]
}
2.設(shè)置文件添加列表后鉤子函數(shù)糟红，鉤子函數(shù)中將文件數(shù)據(jù)添加至:file-list="ruleForm.fileList"艾帐，然后通過(guò)自校驗(yàn)方法隱藏校驗(yàn)提示
:on-change="handleFileChange"
handleFileChange (file, fileList) {
this.ruleForm.fileList.push(file)
this.$refs.ruleForm.validateField('fileList')
}
