表单校验--涉及el-upload图片上传，上传完图片，校验不消失问题

<template>
  <div class="app-container">
      <!-- 商品详情页设置 -->
    <el-dialog :title="title" :visible.sync="isProduct" width="30%" append-to-body v-dialogDrag :before-close="cancel1" v-if="isProduct">
      <!-- 表单 -->
      <el-form ref="productDtlForm" :model="productDtlForm" :rules="rules" label-width="120px" size="small" :key="''+form.id+form.updateTime">
        <el-row>
          <el-col :span="24">
            <el-form-item label="商品名称" prop="productName">
              <el-input v-model="productDtlForm.productName" style="100%" placeholder="请输入商品名称" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="商品信息介绍" prop="productInfoIntroduce">
            <el-input v-model="productDtlForm.productInfoIntroduce" type="textarea" :rows="4" placeholder="请输入商品信息介绍" maxlength="300" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="商品图" prop="productImage" :rules="[{validator: (rule, value, callback)=>{ return getAmountRule(rule, value, callback)},trigger: 'change',required: true,}]">
            <el-upload class="avatar-uploader" :headers="headers" :action="uploadImgUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
              :on-change="handleChange" ref="upload">
              <img v-if="productDtlForm.productImage" :src="prvImageUrl+productDtlForm.productImage" style="width: 100%;height: 100%;">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-row>
        <el-row>
          <annexPicture :annex.sync="form" :per="leftToolBar.per" :picList.sync="productDtlForm.picList" :key="form.id">
          </annexPicture>
        </el-row>
      </el-form>
      <!-- 底部按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button plain type="primary" @click="productSetSubmit()" v-preventReClick>确 定
        </el-button>
        <el-button plain @click="cancel1">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>    
import { getToken } from '@/utils/auth'
export default {
  name: 'Product',
    data() {
        return {
            //   -----------------------
      isProduct: false,
      productDtlForm: {
        productName: null,
        productInfoIntroduce: null, // 商品信息介绍
        productImage: null, // 商品图
        picList: null, //  商品主图
        productMainImage: null, //  商品主图(五张 逗号分割)
        productDescription: null, //  商品描述
      },
      rules: {
        productName: [
          {
            required: true,
            message: '商品名称不能为空',
            trigger: 'blur',
          },
        ],
        productInfoIntroduce: [
          {
            required: true,
            message: '商品信息介绍不能为空',
            trigger: 'blur',
          },
        ],
      },
      prvImageUrl: this.$global.imgUrl,
      headers: { Authorization: 'Bearer ' + getToken() },
      uploadImgUrl: process.env.VUE_APP_BASE_API + '/file/upload/file',
 }
  },
 methods: {
     productSetSubmit() {
      this.$refs.productDtlForm.validate((valid) => {
        if (valid) {
        }
      })
    },
    getAmountRule(rule, value, callback) {
      if (this.praseStrEmpty(this.productDtlForm.productImage) == '') {
        return callback(new Error('商品图片不能为空'))
      } else {
        return callback()
      }
    },
    handleChange(file, fileList) {
      this.$refs.productDtlForm.validateField('productImage') // 手动进行表单验证
    },
    handleAvatarSuccess(res, file) {
      //   console.log('图片地址', res)
      //   this.form.imgPath = res.data.filePath
      this.$set(this.productDtlForm, 'productImage', res.data.filePath)
      this.$refs.upload.clearFiles() // 上传成功后清除历史记录
    },
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/jpg'
      if (!isJPG) {
        this.$message.error('上传图片只能是JPG,PNG 格式!')
      }
      return isJPG
    },
}
}