accept="image/jpg,image/jpeg,image/png"

<el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  accept="image/jpg,image/jpeg,image/png"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

// 限制圖片尺寸
    limitFileWH(E_width, E_height, file) {
      const _this = this
      let imgWidth = ''
      let imgHight = ''
      const isSize = new Promise(function(resolve, reject) {
        const width = E_width
        const height = E_height
        const _URL = window.URL || window.webkitURL
        const img = new Image()
        img.onload = function() {
          imgWidth = img.width
          imgHight = img.height
          const valid = img.width === width && img.height === height
          valid ? resolve() : reject()
        }
        img.src = _URL.createObjectURL(file)
      }).then(() => {
        return true
      }, () => {
        _this.$message.warning({
          message: '上傳圖片的尺寸應(yīng)為' + E_width + '*' + E_height + '，當(dāng)前上傳圖片的尺寸為：' + imgWidth + '*' + imgHight,
          btn: false
        })
        return false
      })
      return isSize
    },
 
    // 圖片上傳之前的判斷
    handleBeforeUpload(file) {
      return new Promise((resolve, reject) => {
        const suffix = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg'
        const isLt1M = file.size / 1024 / 1024 < 1
        if (!suffix) {
          this.$message.error('只能上傳圖片！')
          return reject(false)
        }
        if (!isLt1M) {
          this.$message.error('上傳圖片大小不能超過 1MB!')
          return reject(false)
        }
        // 調(diào)用[限制圖片尺寸]函數(shù)
        this.limitFileWH(400, 400, file).then((res) => {
          file.isFlag = res
          if (file.isFlag) {
            return resolve(true)
          } else {
            return reject(false)
          }
        })
      })
    },
// 上傳成功的回調(diào)
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },