elementUI中為 el-upload 文件上傳添加表單校驗


本人CSDN地址:鏈接

template內

      <el-form-item label="文件上傳" prop="fileList">
        <el-upload
          class="upload-demo"
          :data="upLoadData"
          :action="upLoadUrl"
          :on-remove="upLoadRemove"
          :on-success="upLoadSuccess"
          :file-list="fileList">
          <el-button size="small" type="primary">上傳附件</el-button>
        </el-upload>
      </el-form-item>

script內

  export default {
    data () {
      var validateAttach = (rule, value, callback) => {
        if (this.fileList.length === 0) {
          callback(new Error('附件不能為空'))
        } else {
          let notNull = false
          for (let index = 0; index < this.fileList.length; index++) {
            if (this.fileList[index].isDel === 0) {
              notNull = true
            }
          }
          if (notNull) {
            callback()
          } else {
            callback(new Error('附件不能為空'))
          }
        }
      }
      return {
        visible: false,
        addLoading: false,
        dataFormLoading: false,
        // 文件上傳路徑
        upLoadUrl: this.$http.adornUrl(`/business/sysattach/upload`),
        // 文件上傳攜帶的數據
        upLoadData: {
          'teacherCode': this.$store.state.user.id,
          'fileType': '/TH/',
          'token': this.$cookie.get('token')
        },
        // 附件對象集合
        fileList: [],
        dataForm: {
          thId: 0,
          name: '',
          grantUnit: '',
          honorTime: '',
          grade: '',
          rank: ''
        },
        dataRule: {
          name: [
            {required: true, message: '榮譽稱號不能為空', trigger: 'blur'}
          ],
          grantUnit: [
            {required: true, message: '授予單位不能為空', trigger: 'blur'}
          ],
          honorTime: [
            {required: true, message: '獲得時間不能為空', trigger: 'blur'}
          ],
          grade: [
            {required: true, message: '授予等級 國家級等不能為空', trigger: 'blur'}
          ],
          rank: [
            {required: true, message: '授予等次 一等獎等不能為空', trigger: 'blur'}
          ],
          fileList: [
            {validator: validateAttach, trigger: 'blur'}
          ]
        }
      }
    }
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM