vue antd 中 表单中使用a-upload
在表单中使用a-upload, 属性是必须填写,并在表单的确认按钮中实现上传功能。
·
在表单中使用a-upload, 属性是必须填写,并在表单的确认按钮中实现上传功能。
<a-form :form="form">
<a-row>
<a-col>
<a-form-item label="上传附件">
<a-upload
v-decorator="['file',
{
rules: [{ required: true, message: '请上传文件' }]
}
]"
:showUploadList="false"
:customRequest = "customRequest">
<a-button> <a-icon type="upload" /> 选择文件 </a-button>
</a-upload>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col>
<a-form-item><a-button @click="ok">提交</a-button> </a-form-item>
</a-col>
</a-row>
</a-form>
data:
data(){
return {
form: this.$form.createForm(this),
file:''
}
}
上传的方法和提交方法:
customRequest(file){
// 上传方法中只是把文件暂存
this.file = file
},
ok(){
// 提交数据,验证必须表单项是否都已经填写,包括是否上传了文件
this.form.validateFields((errors, values) => {
if (!errors) {
this.handleUpload(this.file) // 真正的上传
}
})
}
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐

所有评论(0)