vue+element ui表单提交验证包括是否上传图片

<template>
<button class="add" @click="addclick">添加</button>
  <el-dialog
      :title="titlenames"
      :visible.sync="dialogVisible"
      width="40%"
    >
      <el-form ref="form" :model="formData" label-position="left" :rules="rule" label-width="90px">
        <el-form-item label="活动标题" prop="Activitytitle">
          <el-input
            v-model="formData.Activitytitle"
            placeholder="请输入活动标题"
          />
        </el-form-item>
        <el-form-item label="关联课程" prop="Relatedcourses">
          <el-select
            v-model="formData.Relatedcourses"
            multiple
            filterable
            popper-class="select-rule"
            no-match-text="暂无信息"
            no-data-text="暂无信息"
            :default-first-option="true"
            :reserve-keyword="true"
            placeholder="请选择关联课程"
            class="courseList-sel"
          >
            <el-option
              v-for="list in curricululists"
              :key="list.id"
              :label="list.name"
              :value="list.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="设置总价" prop="Totalprice">
          <el-input
            v-model="formData.Totalprice"
            placeholder="请设置总价"
          ></el-input>
        </el-form-item>
        <el-form-item label="活动图" prop="imageUrl">
          <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :http-request="selectPicUpload"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="formData.imageUrl" width="85px" height="85px" :src="formData.imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item label="二维码" prop="Totalprice" v-show="formData.QRcodeurl">
          <el-image
            style="width: 100px; height: 100px"
            :src="formData.QRcodeurl"></el-image>
        </el-form-item>
        <el-form-item label-width="0px !important">
          <el-button type="primary" @click="submitinfomation('form')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
</template>

<script>
 export default {
  name: 'HelloWorld',
  data () {
    return {
     dialogVisible: false,
      formData: { // 修改信息
        Activitytitle: '', // 活动标题
        Relatedcourses: [], // 选中的课程
        Totalprice: 0, // 总价
        imageUrl: '', // 上传的活动图
        QRcodeurl: '' // 二维码图
      },
      rule: {
        Activitytitle: [
          { required: true, message: '请输入活动标题', trigger: 'blur' }
        ],
        Relatedcourses: [
          { type: 'array', required: true, message: '请选择至少一个课程', trigger: 'change' }
        ],
        Totalprice: [
          { required: true, message: '请设置总价', trigger: 'blur' },
          { type: 'number', message: '总价必须为数字值' }
        ],
        imageUrl: [
          { required: true, message: '请上传活动图', trigger: 'change' }
        ]
      },
      rules: {
        visitorName: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' },
          {
            required: true,
            pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
            message: '姓名不支持特殊字符',
            trigger: 'blur'
          }
        ],
        cardCode: [
          { required: true, message: '请输入电话号', trigger: 'blur' },
          { min: 11, max: 11, message: '请如实填写电话号码，以供核对', trigger: 'blur' },
          {
            required: true,
            pattern: /^((13|14|15|16|17|18)[0-9]{1}\d{8})|((166|199|198)[0-9]{1}\d{7})$/,
            message: '请输入正确的电话号码',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
   // 添加
    addclick () {
      // 显示弹窗
      this.dialogVisible = true
    },
    // 创建管理-确定
    submitinfomation (form) {
      // this.dialogVisible = false
      this.$refs[form].validate((valid) => {//接口
        console.log(valid)
        if (valid) {
          let coursesid
	      // eslint-disable-next-line prefer-const
	      coursesid = String(this.formData.Relatedcourses)
	      console.log(coursesid)
	      const datajson = { // 传参
	        titleUrl: this.formData.imageUrl,
	        name: this.formData.Activitytitle,
	        shopIds: coursesid,
	        id: this.currentbookid,
	        money: this.formData.Totalprice
	      }
          // console.log(datajson)
          this.http
            .post('add', datajson)
            .then(
              res => {
                // console.log(res)
                if (res.code === 1) {
                  this.dialogVisible = false
                  this.$message({
                    duration: 1000,
                    type: 'success',
                    message: '添加!'
                  })
                  this.getadminlist(this.roomcode)//更新管理列表
                  this.$refs[form].resetFields()//表单重置
                }
              },
              // eslint-disable-next-line handle-callback-err
              (err) => {
                this.$message(err.message)
              }
            )
        } else {
          this.$message({
            duration: 1000,
            type: 'error',
            message: '创建失败!'
          })
          return false
        }
      })
    },
     handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    // 上传图标事件
    selectPicUpload(obj) {
      const fd = new FormData() // 参数的格式是formData格式的
      console.log(obj.file)
      fd.append('file', obj.file) // 参数
      fd.append('bucketName', 'course')
      console.log(fd)
      const fwq = 'https://www.cn' 
      this.http.post('file', fd).then(res => {
        if (res) {
          this.$message.success('上传成功')
          this.formData.imageUrl = fwq + '/' + res.bucketName + '/' + res.objectName
          this.$refs.formData.validateField('imageUrl')
        } else {
          this.$message.warning('上传失败')
        }
        // eslint-disable-next-line handle-callback-err
      }).catch(error => {
      })
    },
    // 对上传图片的大小、格式进行限制
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isJPG2 = file.type === 'image/jpg'
      const isPNG = file.type === 'image/png'
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isJPG && !isJPG2 && !isPNG) {
        this.$message.warning('只支持jpg或png格式图片')
      }
      if (!isLt5M) {
        this.$message.warning('请上传5MB以内的图片!')
      }
      return (isJPG || isJPG2 || isPNG) && isLt5M
    }
  }  
 }
</script>