记录el-upload表单上传验证

要求：

在表单中实现单张图片上传，并且自动进行表单验证，提交验证和重置功能

html部分：

其他表单自行添加，我只把上传部分单独拎出来了

      <el-form-item label="上传" prop="advimgsrc" required>
        <el-upload
        :action="uploadURL"
        ref="upload"
        list-type="picture-card"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :on-change="handleChange"
        :limit="1"
        accept=".JPG, .png, .jpeg"
        >
          <img v-if="this.form.advimgsrc" :src="this.form.advimgsrc" class="avatar" style="width:100%">
          
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

↑↑↑↑这里是通过:limit="1"来配置只能上传一个；

required显示红星（不知道为啥有prop但是没有必填红星）

利用:on-change来对上传进行单独验证

js部分：

data(){
     var validateAttach=(rule, value, callback)=>{
           if(this.form.advimgsrc==''){
              return callback(new Error('附件不能为空'))
          }else{
              return callback()
            }
      }
    return:{
        
    },
    form:{
        advimgsrc:''
    },
    uploadURL:'自己的上传地址'
    rules:{
        advimgsrc: [
            {validator: validateAttach, trigger: 'change'}
        ]
    }
}
methods:{
    //提交
    onSubmit(formName) {
        this.$refs[formName].validate(async(valid) => {
          if (valid) {
            try{
              let res = await http(this.form)
              this.$message({
                  showClose: true,
                  message: res.msg,
                  type: "success"
              });
              this.resetForm('form')
            }catch(err){
                this.$message({
                    showClose: true,
                    message: '提交失败',
                    type: "error"
                });
            }
          } else {
            return false;
          }
        });

    },
    // 重置
    resetForm(formName) {
        this.$refs[formName].resetFields();
    },
    // 上传成功
    handleAvatarSuccess(res, file) {
      this.form.advimgsrc=res;
      this.$refs.upload.clearFiles(); //上传成功之后清除历史记录（关键代码）
    },
    // 改变
    handleChange(file, fileList){
      this.$refs.form.validateField('advimgsrc');//对部分表单字段进行校验的方法，也就是手动进行表单验证（关键代码）
    }

}

有错误的地方还请大家指正。