el-upload指定上传图片类型、尺寸、大小

 （1）el-upload指定上传图片类型

        <el-upload
          :action="actionUrl"
          :headers="headers"
          name="file"
          :before-upload="beforeUpload"
          :on-success="handleSuccess"
          :show-file-list="false"
        >
          <el-button size="mini" class="manage-btn"
            ><span>上传头像</span></el-button
          >
          <div slot="tip" class="el-upload__tip light-gray">
            建议上传100*100尺寸图片
          </div>
          <div slot="tip" class="el-upload__tip light-gray">
            格式：JPG,PNG,GIF
          </div>
        </el-upload>

 （2）validImageSize校验图片大小；beforeUpload检验上传图片的类型以及大小

    //图片尺寸检验
    validImageSize(file, imgWidth, imgHeight) {
      let img = new Image();
      let _URL = window.URL || window.webkitURL;
      new Promise((resolve, reject) => {
        img.onload = function () {
          let valid = img.width === imgWidth && img.height === imgHeight;
          valid ? resolve() : reject();
        };
        img.src = _URL.createObjectURL(file);
      }).then(() => {
        return file
      }).catch(() => {
        return Promise.reject()
      })
    },

    beforeUpload(file) {
      const typeList = ["jpg", "jpeg", "png", "gif"];
      let fileType = file.name.split(".").slice(-1)[0].toLowerCase();
      if (typeList.indexOf(fileType) === -1) {
        this.$message.error("图片格式只能为jpg/jpeg/png/gif");
        return false;
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
        return false;
      }
      let isSize = this.validImageSize()
      if(!isSize) {
        this.$message.error("图片尺寸限制为100*100!");
        return false
      }
    },

    handleSuccess(res) {
      if (res.code == 200) {
        this.headPictureUrl = res.data
        this.$message.success("图片上传成功");
      } else {
        this.$message.error("图片上传失败！");
      }
    },