Element-ui中为Upload 上传添加表单校验

本人博客园:链接
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'}
          ]
        }
      }
    }
}

你可能感兴趣的:(vue)