Element对img图片列表，头像，el-upload做表单验证

做项目的时候有时候会遇到这种需求：

1，用户头像要做必填验证

2，产品的多图也要进行必填验证

第一种：用户头像

用户头像都是单张图，可以利用利用el-input组件做验证，看完整代码

<el-form-item label="头像" prop="logo" :rules="{ required: true, message: '请上传', trigger: 'blur' }">

<el-input class="hide" v-model="form.logo"></el-input>

<el-upload

class="single-upload"

:show-file-list="false"

:action="uploadActionUrl"

:headers="uploadImgHeader"

name="brandLogo"

:on-success="handleAvatarSuccess"

:before-upload="beforeAvatarUpload">

<div slot="tip" class="el-upload__tip">头像格式限制，size限制提示</div>

</el-upload>

</el-form-item>

注：我在做这个时候有一个bug，就是el-upload上传成功图像后，图像怎么都不显示，最后是看到URL.createObjectURL这个才解决的

第二种：图片列表

多图是数组的形式，刚好el-check-group也是数组形式，可以用它做验证

下面看完整代码

<el-form-item :label="$t('product.product_img')" prop="imgList">

<el-checkbox-group v-model="form.imgList"></el-checkbox-group>

<el-upload

:action="uploadActionUrl"

multiple

:limit="5"

name="goodsImages"

:headers="uploadImgHeader"

:before-upload="onBeforeUpload"

accept="image/jpeg,image/png"

list-type="picture-card"

:file-list="form.imgList"

:on-success="uploadImageSuccess"

:on-error="uploadImageError"

:on-preview="handlePictureCardPreview"

:on-remove="handleRemove"

:on-exceed="handleeExceed">

<div slot="tip" class="el-upload__tip">{{$t('product.product_img_tips')}}</div>

</el-upload>

<el-dialog :visible.sync="dialogVisible">

</el-dialog>

</el-form-item>

注意：表单验证必须要在el-form-item标签上进行

欢迎留言，1小时内回复。

我已经用vue+element做过好几个大型项目，遇到过不少坑，希望能帮到有需要的人。

另外，这些博客上的视频教程真的对开发有不小的帮助，发出来的大部分我都已经看了，良心推荐

6条评论

能看下校验的代码吗

感谢解决了难题

能看下校验的代码吗

大熊说道：

2019年8月12日下午4:27

单图在el-form-item上面已经写了
多图是这样的：
:rules=”{type: ‘array’, required: true, message: ‘请上传图片’, trigger: ‘change’}”
1. 黎明说道：
  
  2019年8月12日下午5:59
  
  您这里我试了一下，可以阻止–如果没有上传文件，不能上传，但已经上传文件以后，好像依然被阻止上传
  1. 大熊说道：
    
    2019年8月12日下午11:47
    
    关键是trigger这里可以为change，可以为blur 你都试一下

评论已关闭

szz说道：

2019年7月15日下午2:33

能看下校验的代码吗
szz说道：

2019年7月15日下午2:42

感谢解决了难题
黎明说道：

2019年8月12日下午4:22

能看下校验的代码吗
1. 大熊说道：
  
  2019年8月12日下午4:27
  
  单图在el-form-item上面已经写了
  多图是这样的：
  :rules=”{type: ‘array’, required: true, message: ‘请上传图片’, trigger: ‘change’}”
  1. 黎明说道：
    
    2019年8月12日下午5:59
    
    您这里我试了一下，可以阻止–如果没有上传文件，不能上传，但已经上传文件以后，好像依然被阻止上传
    1. 大熊说道：
      
      2019年8月12日下午11:47
      
      关键是trigger这里可以为change，可以为blur 你都试一下

为您推荐

uniapp在线检查更新，进度条展示

前端项目对网络url文件路径进行点击下载，而不是浏览器自动预览pdf, png

element DatePicker禁用日期

手把手制作mobileconfig文件，在iphone上创建h5网页桌面图标

Flutter ListTile – Flutter每周一组件

Flutter Inkwell – Flutter每周一组件

6条评论