vue+elmenet ui el-upload上传组件表单验证

我的需求是：表单中有上传组件，选择文件后，文件不自动上传，而是随表单提交再上传
初始界面如图：

触发验证后：

上传文件后：

实现思路：利用on-change方法（文件状态发生改变时的钩子），判断是否有上传文件的名字，如果存在，则说明已上传文件，则对rules里的requierd赋值为false，其他情况则依然是true
代码如下：

        <el-form-item label="发布内容" prop="uploadBox" ref="uploadRule">
          <el-upload ref="upload" :limit="1" :headers="upload.headers" :action="upload.url" :data="form" :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :on-error="handleFileError"
            :auto-upload="false" :on-change="handleFileChange" :on-remove="handleRemove" drag multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
          </el-upload>
          <div>只能上传1个文件</div>
        </el-form-item>

当文件列表发生变化时，触发这个方法

// 文件状态发生改变时
      handleFileChange(file, fileList) {
        if (file.name != null && file.name != undefined && file.name != "") {
          this.$refs.uploadRule.clearValidate()
          this.rules.uploadBox[0].required = false
        }
      },

表单取消提交后的操作

      // 取消按钮
      cancel() {
        this.$emit("update:open", false)
        this.$emit("update:id", 0)
        this.rules.uploadBox[0].required = true
        this.$refs.upload.clearFiles()
      },

上传文件后在文件列表移除该文件后，不上传文件的话，表单提示也会消失，为了防止这一情况，触发该方法

      // 文件列表移除文件时
      handleRemove() {
        this.rules.uploadBox[0].required = true
      },

表单提交且文件上传成功后，恢复验证

      // 文件上传成功处理
      handleFileSuccess(response, file, fileList) {
        this.$refs.upload.clearFiles()
        this.reset()
        this.rules.uploadBox[0].required = true
      },