需求：elementUI 框架上傳圖片，要判斷 圖片是否是 500*500 的尺寸

相關(guān)代碼：

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>點(diǎn)擊上傳</em></p>
                </div>
              </div>
              <p class="el-upload__tip"
                 slot="tip">500*500px，jpg/jepg/gif/png格式支持，20M以內(nèi)(點(diǎn)擊上圖上傳)</p>
            </el-upload>
          </el-form-item>

js:

      // 上傳封面圖之前
      handleBeforeUpload() {
        if (!this.uploadStatus) {
          this.$message.error('請(qǐng)等待其它視頻或圖片上傳完成')
        }
      },
      // 上傳封面圖
      handleUploadAvtar({ file }) {
        if (!this.uploadStatus) {
          this.urls = ''
          return
        }
        if (file.size > 20 * 1024 * 1024) {
          this.$message.error('圖片大小不能超過(guò)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 值，不然后面使用會(huì)有問(wèn)題
            const that = this
            // 如果圖片被緩存，則直接返回緩存數(shù)據(jù)
            if (img.complete) {
              if (img.width !== 500 || img.height !== 500) {
                that.$message.error('請(qǐng)上傳500*500px的圖片')
                that.uploadLoadingAvatar = false
                that.uploadStatus = true
              } else {
                // 賦值顯示相關(guān)圖片
                that.urls = url
              }
            } else {
              // 完全加載完畢的事件
              img.onload = function() {
                if (img.width !== 500 || img.height !== 500) {
                  that.$message.error('請(qǐng)上傳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 值，不然后面使用會(huì)有問(wèn)題
            const that = this
            // 如果圖片被緩存，則直接返回緩存數(shù)據(jù)
            if (img.complete) {
              if (img.width !== 500 || img.height !== 500) {
                that.$message.error('請(qǐng)上傳500*500px的圖片')
                that.uploadLoadingAvatar = false
                that.uploadStatus = true
              } else {
                // 賦值顯示相關(guān)圖片
                that.urls = url
              }
            } else {
              // 完全加載完畢的事件
              img.onload = function() {
                if (img.width !== 500 || img.height !== 500) {
                  that.$message.error('請(qǐng)上傳500*500px的圖片')
                  that.uploadLoadingAvatar = false
                  that.uploadStatus = true
                } else {
                  that.urls = url
                }
              }
            }

要是有緩存數(shù)據(jù)，就直接是 img.complete 的情況，要是 沒(méi)有，就要重新加載，為 img.onload 的情況，在 之前 要進(jìn)行const that = this的 賦值，不然后面使用會(huì) 模糊this 的指向報(bào)錯(cuò)。

相關(guān)參考資料鏈接：https://www.jb51.net/article/149891.htm