使用iview 的表单组件验证 Upload 组件

使用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>

钻研不易，转载请注明出处。。。。。。