使用iview 的表单组件验证 Upload 组件
结果：
点击提交按钮, 没有填的form
代码：
<template> <div id="user_add"> <Modal v-model="build" title="新建" @on-cancel="AddData = {}" class-name="vertical-center-modal" > <Form ref="add" :model="AddData" :rules="AddRule" :label-width="90"> <FormItem label="apk文件" prop="file"> <Upload v-model="AddData.file" :before-upload="handleUpload" accept=".apk" :format="['.apk']" :max-size=102400 action="#" ref="upload" > <Button size="small">选择文件</Button> </Upload> <span style="margin-left: 10px"> 文件名称: <span v-if="AddData.file === null">未选择文件</span> <span v-if="AddData.file !== null">{{ AddData.file.name }}</span> </span> </FormItem> </Form> <div slot="footer"> <Button type="primary" @click="verification" :loading="loadingStatus">确定</Button> </div> </Modal> </div> </template> <script> import { appVersionAdd } from '@/api/systemManage' export default { name: 'UserAdd', data () { // 自定义验证 判断上传文件 fileList 的长度, 这样就和普通输入框表现一致了 const validateUpload = (rule, value, callback) => { if (this.AddData.file === null) { callback(new Error('请选择要上传的文件')) } else { callback() } } return { /* 添加数据 */ AddData: { remark: '', file: null }, /* 表单验证规则 */ AddRule: { file: [ { required: true, validator: validateUpload, trigger: 'change' } ] }, /* 新建框 */ build: false, /* 上传过程中的加载状态控制 */ loadingStatus: false } }, mounted () { this.init() }, methods: { /* 上传excal坐标文件 */ handleUpload (file) { // 将获取到的文件流赋值给fromData this.AddData.file = file // 选择文件后触发验证关闭错误提示 this.$refs['add'].validate(() => {}) }, /* 验证 */ verification () { this.loadingStatus = true this.$refs['add'].validate((valid) => { if (valid) { this.upload() } else { this.loadingStatus = false } }) }, /* 提交 */ upload () { // 创建上传文件用的formData let param = new FormData() param.append('file', this.AddData.file) param.append('remark', this.AddData.remark) this.params = param // 将FormData作为参数用axios上传，此处的axios经过封装 appVersionAdd(this.params).then((res) => { if (res.data.code === '0000') { this.$Notice.success({ title: '上传成功' }) this.loadingStatus = false } else { this.loadingStatus = false } }) } } } </script> <style scoped lang="scss"> </style> <style lang="scss"> /* 弹出框竖直居中 */ .vertical-center-modal{ display: flex; align-items: center; justify-content: center; text-align: left; .ivu-modal{ top: 0; } } </style> 钻研不易，转载请注明出处。。。。。。