elementUI 单张图片上传，限制图片大小和格式

1.前端视图部分代码

<el-upload
  class="avatar-uploader"
  :headers="upload.headers"
  :action="upload.url"
  :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" />
  <div slot="tip" class="el-upload__tip" style="color:red">提示：仅允许导入.png格式文件，1920*760px！</div>
</el-upload>

2.前端script data部分

// PDF文件导入参数
upload: {
    
    
  // 设置上传的请求头部
  headers: {
    
     token: getToken() },
  // 上传的地址
  url: process.env.VUE_APP_BASE_API + 'banner/importBannerUrl'
},
imageUrl: ''

3.前端script方法部分(beforeAvatarUpload方法是在上传之前对格式以及大小进行限制)

handleAvatarSuccess(res, file) {
    
    
      if (res.success) {
    
    
        this.imageUrl = res.data
      }
    },
    beforeAvatarUpload(file) {
    
    
      const isPNG = file.type === 'image/png'
      if (!isPNG) {
    
    
        this.$message.error('上传图片只能是.png格式!')
      }
      const isSize = new Promise(function(resolve, reject) {
    
    
        const width = 1920
        const height = 760
        const _URL = window.URL || window.webkitURL
        const img = new Image()
        img.onload = function() {
    
    
          const valid = img.width === width && img.height === height
          valid ? resolve() : reject()
        }
        img.src = _URL.createObjectURL(file)
      }).then(() => {
    
    
        return file
      }, () => {
    
    
        this.$message.error('上传的图片必须是1920*760px!')
        return Promise.reject()
      })
      return isPNG && isSize
    }

4.前端样式部分

.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 {
    
    
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
    
    
  width: 178px;
  height: 178px;
  display: block;
}