getImageSize(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.onload = e => {
          const image = new Image()
          image.onload = () => {
            resolve({
              width: image.width,
              height: image.height
            })
          }
          image.src = e.target.result
        }
        reader.readAsDataURL(file)
      })
    },

<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :before-upload="beforeProductImageUpload"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<script>
  export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      beforeProductImageUpload(file) {
           const imgType = ['image/png', 'image/jpeg', 'image/jpg'].includes(file.type)
            if (!imgType) {
              this.$message.warning('产品主图只允许JPG/PNG/JPEG格式')
              return false
            }
            return this.getImageSize(file).then(size => {
              if (size.width !== 108 && size.height !== 108) {
                this.$message.warning('产品主图尺寸必须为108*108')
                return Promise.reject()
              }
            })
      },
    }
  }
</script>

:deep(.el-upload-list__item.is-ready) {
    display: none;
}