vue upload上传 验证validator

vue upload验证

html

      <el-form-item label="logo" prop="logo">
        <el-upload
          ref="upload" :file-list="fileList"
          action="/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :http-request="submitUpload"
          :on-change="handleChange"
          :beforeUpload="beforeUpload"
          :auto-upload="false"
          :limit="1"
        >
          <i class="el-icon-plus"></i>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过2Mb</div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" width="60%" append-to-body>
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>

js

data:{
    let validateUploadFile = (rule, value, callback) => {
        let _this = this;
        let uploadFiles = _this.$refs.upload.uploadFiles;
        let flag = uploadFiles && uploadFiles.length;
        if (!flag) {
          callback(new Error('请上传图片'));
        } else {
          callback();
        }
    };
    rules:{
      logo: [
        {required: true, trigger: ['blur', 'change'], validator: validateUploadFile},
      ]
    }
}

methods:{
    handleChange(){
        this.$refs['form'].validateField("logo");
    },
    onSubmit() {
        this.$refs['form'].validate((valid) => {
            if(valid) {
                this.$refs.upload.submit();
            }
        });
    },
}

后记

在开始的时候el-form-item里加了required，导致验证的时候总是会出现提示logo is required，去掉之后即可

<el-form-item label="logo" prop="logo" required>