VUE+ElementUI图片上传的判断格式、大小、尺寸（即宽高比）完整实现。

需求分析：表单中需要上传图片，并对图片做出限制：1）上传图片大小不能超过 2M；2）上传图片格式只能是jpg或png；3）上传图片的宽高比例为2：1。效果如图所示：利用on-change的钩子写判断方法。HTML：<el-form-item label="LOGO" prop="logo_src"><el-uploadref="upload"class=

ironybbb

10933人浏览 · 2021-09-16 17:26:22

ironybbb · 2021-09-16 17:26:22 发布

需求分析：
表单中需要上传图片，并对图片做出限制：

1）上传图片大小不能超过 2M；
2）上传图片格式只能是jpg或png；
3）上传图片的宽高比例为2：1。
效果如图所示：
在这里插入图片描述

利用on-change的钩子写判断方法。

HTML：

			<el-form-item label="LOGO" prop="logo_src">
                <el-upload
                  ref="upload"
                  class="avatar-uploader"
                  action="#"
                  :show-file-list="false"
                  :on-change="picchange"
                  :limit="1"
                  :auto-upload="false"
                >
                  <img
                    v-if="form.logo_src != ''"
                    :src="form.logo_src"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  <span slot="tip" class="el-upload__tip"
                    >只能上传宽高比例为2：1的 jpg/png文件，且不超过2M</span
                  >
                </el-upload>
              </el-form-item>

CSS样式：

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  color: #8c939d;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.el-upload__tip {
  position: relative;
  bottom: 20px;
  left: 20px;
}
.avatar {
  width: 50px;
  height: 50px;
  display: block;
}

JS：（其中uploadlogo须在data中声明，存储图片文件，这是提交表单时所需要传参的数据）

// 改变logo图片时做判断
    picchange(file) {
      this.$refs.upload.clearFiles()
      console.log(file)
      const isJPG =
        file.raw.type === "image/jpeg" || file.raw.type === "image/png"
      const isLt2M = file.raw.size / 1024 / 1024 < 2
      
      if (!isLt2M) {
        this.$message.warning("上传图片大小不能超过 2M!")
        return false
      } else if (!isJPG) {
        this.$message.warning("上传图片格式只能是jpg或png")
        return false
      } else {
        this.imgchecked(file).then((data) => {
        //data返回值即为判断结果。
          if (data) {
            this.form.logo_src = URL.createObjectURL(file.raw)//预览图
            this.logoupload = file.raw
          }
        })
      }
    },
    //判断尺寸方法
    imgchecked(file) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader()
        reader.readAsDataURL(file.raw) // 必须用file.raw
        reader.onload = () => {
          // 让页面中的img标签的src指向读取的路径
          let img = new Image()
          img.src = reader.result

          img.onload = () => {
            if (img.width / img.height !== 2) {
              this.$message.warning(
                `需上传图片宽高比例为2：1,当前文件${img.width}×${img.height}`
              )
              resolve(false)
            } else {
              resolve(true)
            }
          }
        }
      })
    },

打印出file看看。
在这里插入图片描述

file文件中直接存储有图片名字、大小和类型，如果不需要判断尺寸只用picchange即可，我这里是直接把判断宽高比的操作提出来了。
判断图片的宽高的操作利用了JavaScript的原生API FileReader。
是在这位大佬这边看到的解决方法：https://blog.csdn.net/m0_48721669/article/details/118941638?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_title~default-1.no_search_link&spm=1001.2101.3001.4242
当文件读取完成后就可以获取img的宽高啦。

因为对Promise对象不熟所以弄了很久，需要通过then（）来获取判断结果。需要复习：
https://es6.ruanyifeng.com/#docs/promise
https://www.cnblogs.com/lvdabao/p/es6-promise-1.html