效果图

html部分
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" size=‘mini‘ label-width="100px" class="demo-ruleForm"> <el-form-item label="转盘图片" class="box-integral" prop=‘imageUrl‘> <el-upload class="avatar-uploader" :action="URL+‘/api/post/file‘" //服务器地址 :data="date" //需要带的参数 :show-file-list="false" :on-success="handleAvatarSuccess" :on-error="imageUrlerror" :before-upload="beforeAvatarUpload"> <img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> <label style="position: relative;left: 6px;">(建议大小320*320px)</label> </el-form-item> </el-form>
data部分
data(){
  return{
    date:{
      token:‘‘
},
ruleForm"{
imageUrl:‘‘
},
rules:{
imageUrl:[{requird:true,message:‘请选择转盘图片‘,trigger:‘change‘}]
}
}
}
js部分
//会验证整个表单 // this.$refs.ruleForm.validate(valid => {}) //改为不验证整个表单而是验证指定表单 this.$refs.ruleForm.validateField(‘imageUrl‘)
原文:https://www.cnblogs.com/tlfe/p/12156135.html