elementUI 图片上传判断长宽是否符合标准

需求：elementUI 框架上传图片，要判断 图片是否是 500*500 的尺寸

相关代码：

html：

          <el-form-item label="模板封面"
                        class="upload-img">
            <el-upload class="el-upload-container avatar"
                       drag
                       action=""
                       element-loading-text="上传中..."
                       :disabled="uploadLoadingAvatar"
                       accept="gif,jpg,jpeg,png"
                       :before-upload="handleBeforeUpload"
                       :http-request="handleUploadAvtar"
                       v-loading="uploadLoadingAvatar"
                       :show-file-list="false">
              <div class="el-upload-area">
                <img v-if="urls"
                     :src="urls"
                     style="width:200px;height:200px;">
                <div v-show="!urls">
                  <i class="el-icon-upload"></i>
                  <p class="el-upload__text"><em>点击上传</em></p>
                </div>
              </div>
              <p class="el-upload__tip"
                 slot="tip">500*500px，jpg/jepg/gif/png格式支持，20M以内(点击上图上传)</p>
            </el-upload>
          </el-form-item>

js:

      // 上传封面图之前
      handleBeforeUpload() {
        if (!this.uploadStatus) {
          this.$message.error('请等待其它视频或图片上传完成')
        }
      },
      // 上传封面图
      handleUploadAvtar({ file }) {
        if (!this.uploadStatus) {
          this.urls = ''
          return
        }
        if (file.size > 20 * 1024 * 1024) {
          this.$message.error('图片大小不能超过20M')
          return
        }
        // eslint-disable-next-line no-new
        new this.$upload({
          fileData: file,
          fileExt: ['gif', 'png', 'jpg', 'jpeg'],
          onUploadBefore: () => {
            this.uploadLoadingAvatar = true
            this.uploadStatus = false
          },
          onSuccess: ({ url }) => {
            const img = new Image()
            img.src = url
            // 需要赋值定义一下 this 值，不然后面使用会有问题
            const that = this
            // 如果图片被缓存，则直接返回缓存数据
            if (img.complete) {
              if (img.width !== 500 || img.height !== 500) {
                that.$message.error('请上传500*500px的图片')
                that.uploadLoadingAvatar = false
                that.uploadStatus = true
              } else {
                // 赋值显示相关图片
                that.urls = url
              }
            } else {
              // 完全加载完毕的事件
              img.onload = function() {
                if (img.width !== 500 || img.height !== 500) {
                  that.$message.error('请上传500*500px的图片')
                  that.uploadLoadingAvatar = false
                  that.uploadStatus = true
                } else {
                  that.urls = url
                }
              }
            }
          },
          onComplete: () => {
            this.uploadLoadingAvatar = false
            this.uploadStatus = true
          },
          onTaskError: () => {
          }
        })
      }

其中主要是 onSuccess 这段

            const img = new Image()
            img.src = url
            // 需要赋值定义一下 this 值，不然后面使用会有问题
            const that = this
            // 如果图片被缓存，则直接返回缓存数据
            if (img.complete) {
              if (img.width !== 500 || img.height !== 500) {
                that.$message.error('请上传500*500px的图片')
                that.uploadLoadingAvatar = false
                that.uploadStatus = true
              } else {
                // 赋值显示相关图片
                that.urls = url
              }
            } else {
              // 完全加载完毕的事件
              img.onload = function() {
                if (img.width !== 500 || img.height !== 500) {
                  that.$message.error('请上传500*500px的图片')
                  that.uploadLoadingAvatar = false
                  that.uploadStatus = true
                } else {
                  that.urls = url
                }
              }
            }

要是有缓存数据，就直接是 img.complete 的情况，要是 没有，就要重新加载，为 img.onload 的情况，在 之前 要进行const that = this的 赋值，不然后面使用会 模糊this 的指向报错。

相关参考资料链接：https://www.jb51.net/article/149891.htm