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

 

 

鑽研不易，轉載請註明出處。。。。。。