el-upload上传图片必填提示，超出最大数量不展示上传按钮

因为在不同的项目中经常看到关于upload不同的写法，今天做一下记录，方便以后使用。

一、el-upload设置必填

需求描述

提交表单的时候，图片作为必填项，如果没有上传，提示信息和输入框单选框一样，在表单相关字段下进行提示，而不是通过message提示（如下图）。

message提示.jpg

实现步骤

提交表单的时候，el-upload作为一个表单项，在rules里面加上校验。
需要注意的是，因为不会直接进行绑定，上传成功以及删除都需要赋值到对应的字段。

<el-form ref="editForm" :model="editForm" :rules="rules" label-width="60px">
  <el-form-item label="照片：" prop="afterList">
    <el-upload
      list-type="picture-card"
      :action="uploadImgUrl"
      :headers="headers"
      :file-list="editForm.afterList"
      multiple
      :limit="5"
      :on-success="handleImgSuccess"
      :on-preview="handleImgPreview"
      :on-remove="handleImgRemove"
      :before-upload="beforeImgUpload"
      accept="image/*"
    >
      <i slot="default" class="el-icon-plus"></i>
    </el-upload>
  </el-form-item>
</el-form>

一些关于Upload 上传所用到字段的简单解释

参数	说明
list-type	文件列表的类型，可选 picture-card是照片墙
action	图片上传地址
headers	请求头
file-list	上传展示的文件列表， show-file-list为true时才会展示
multiple	支持多选
limit	最大允许上传个数
accept	接受上传的文件类型
on-success	文件上传成功时的钩子成功
on-preview	点击文件列表中已上传的文件时的钩子预览
on-remove	文件列表移除文件时的钩子删除
before-upload	上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。校验

rules设置，无论是规则名称还是字段名称都要保持一致。

rules: {
  afterList: [
    { required: true, message: "照片不能为空", trigger: "change" },
  ],
}

上传成功之后必须进行赋值操作，否则虽然页面看起来展示成功了，但是并没有进入到设置的字段中。

因为把新增修改写在了一个弹窗里，所以代码在赋值的时候判断了url的取值。
新增的地址为item.response.url，修改的地址为item.url(回显的时候赋值在了这个字段)。
如果只是新增不涉及修改，可以不用判断url取值，直接写成 return item.response.url即可。

handleImgSuccess(res, file, fileList) {
  this.editForm.afterList = fileList.map(item=>{
    let url = '';
    if (item.response && item.response.url) {
      url = item.response.url;
    } else {
      url = item.url;
    }
    return url;
  });
},

同样，删除之后也需要重新赋值，否则虽然页面看起来没有了，但是字段中设置的内容并没有发生改变。

新增修改在一个弹窗，所以删除的图片既可能是数据库已有的也可能是修改时新增还没有提交的。地址和上传成功获取一样。

handleImgRemove(file, fileList) {
  this.editForm.afterList = fileList.map(item=>{
    let url = '';
    if (item.response && item.response.url) {
      url = item.response.url;
    } else {
      url = item.url;
    }
    return url;
  });
},

完成效果

设置完成之后，必填提示如下

必填提示.jpg

二、超出最大数量不展示上传按钮

需求描述

使用upload上传时，默认后面的上传按钮永远存在，如下图所示。

上传.jpg

达到最大允许上传数之后，不再显示此上传按钮。

实现思路

通过浏览器调试找到上传按钮的类名，为el-upload--picture-card。通过修改这个类的样式隐藏上传按钮。

调试.png

具体步骤

在upload标签上先绑定一个类名:class="{hide:hideUpload}"。当hideUpload为true时，hide样式生效，上传按钮隐藏。data中设置hideUpload默认为false，显示上传按钮。
修改Element UI中标签的样式，使用深度选择器强制修改。
类名前加上/deep/，>>>或::v-deep；需要用在有 scoped 属性的 style 标签中。

<style scoped>
.hide /deep/ .el-upload--picture-card {
  display: none;
}
</style>

在el-upload中绑定一个on-change事件，添加文件、上传成功和上传失败时都会被调用。

//绑定事件  :on-change="handleImgChange"
handleImgChange (file, fileList) {
  this.hideUpload = fileList.length >= 1; //1为设置的最大允许上传数
},

on-change事件在文件移除时不会被触发，因此我们需要在on-remove移除事件再进行一次判断或者手动触发on-change事件，二选一即可。

//绑定事件:on-change="handleImgChange"
handleImgRemove (file, fileList) {
  this.hideUpload = fileList.length >= 1; //1为设置的最大允许上传数
  // this.handleImgChange(file, fileList); //手动触发
},

完成效果

设置最大上传数为1，最终效果图如下

效果.png

el-upload上传图片必填提示，超出最大数量不展示上传按钮