注意prop要绑定

<el-form ref="form" :model="form" :rules="rules" label-width="150px">
	<el-form-item label="文件:"  style="width: 300px" prop="fileList">
	  <el-upload
	    v-model="form.fileList"
	    align="left"
	    drag
	    class="upload-demo"
	    :auto-upload="false"
	    :data="fileData"
	    :action="upload()"
	    :on-change="handleChange"
	    :on-remove="handleRemove"
	    multiple
	    :limit="1"
	    :file-list="fileList">
	     <i class="el-icon-upload"></i>
	       <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
	       <div class="el-upload__tip" slot="tip">只能上传pdf文件</div>
	  </el-upload>
	</el-form-item>
	<el-form-item>
	    <el-button type="primary" @click="submitForm('form')">保存</el-button>
	</el-form-item>
</el-form>
rules: {
        fileList: [
          { required: true, message: '请上传文件', trigger: 'change' }
        ]
}

方法

// 选择文件后给表单验证的prop字段赋值, 并且清除该字段的校验
handleChange(file, fileList) {
 this.form.fileList = fileList;
 // 防止用户打开了文件选择框之后不选择文件而出现效验失败
 if(this.form.fileList){
   this.$refs.form.clearValidate('fileList');
 } 
},
// 删除文件后重新校验该字段
handleRemove(file, fileList) {
 this.form.fileList = fileList;
 this.$refs.form.validateField('fileList');
},
submitForm(formName){
	this.loading = true;
	this.$refs[formName].validate((valid) => {
	if (valid) {
		// 校验成功后执行 
	} else {
		// 失败后执行
		console.log('error submit!!');
		return false;
	}
	})
}
Logo

前往低代码交流专区

更多推荐