vue上传图片限制格式以及尺寸大小

废话不多说,直接整篇拖！！！！！！！！！

包含父组件传参,自行删减。

<template>
  <el-upload
    :action="`url`"
    class="upload-demo"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :limit="limitCount"
    :on-success="handleAvatarSuccess"
    :on-exceed="handleExceed"
    :on-error="imgUploadError"
    :on-change="handleChange"
    :multiple="false"
    :file-list="fileList"
    :class="{hide:hideUpload}"
    :disabled="disabled"
    :before-upload="beforeAvatarUpload"
    drag
    accept=".png"
    name="imgFile"
  >
    <i class="el-icon-upload" />
    <div class="el-upload__text"><em>点击上传</em></div>
    <div slot="tip" class="el-upload__tip">只能上传{{ picWidth }}宽度*{{ picHeight }}高度的png文件，且不超过{{ limitSize }}m</div>
  </el-upload>
</template>
<script>
import { mapActions } from 'vuex'

export default {
  name: 'PicUploadSingle',
  model: {
    prop: 'value',
    event: 'picChange'
  },
  props: {
    // // 图片默认地址
    value: {
      required: true,
      type: null
    },
    picSize: {
      type: String,
      default: 'original'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    picWidth: {
      type: String,
      default: '200'
    },
    picHeight: {
      type: String,
      default: '200'
    },
    limitSize: {
      type: String,
      default: '2'
    },
    limitCount: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      hideUpload: false,
      // limitCount: 1,
      fileList: []
    }
  },
  watch: {
    value(newV) {
      if (newV) {
        this.fileList = [{ url: newV.fileUrl, name: this.value.fileName }]
      }
    }
  },
  created() {
    console.log(this.value)
    if (this.value) {
      this.fileList.push({
        url: this.value.fileUrl,
        name: this.value.fileName
      })
    }
    this.hideUpload = this.fileList.length >= this.limitCount
  },
  methods: {
    ...mapActions('global', ['setSingleUrl']),
    ...mapActions('organize', ['deletePic']),
    // 删除图片
    handleRemove(file, fileList) {
      this.hideUpload = fileList.length >= this.limitCount

      console.log(file.url)
      if (file.url) {
        // this.deletePic({
        //   fileUrls: [file.url]
        // })
      }
      this.$emit('picChange', null)
    },
    // 预览
    handlePictureCardPreview(file) {
      this.setSingleUrl(file.url)
    },
    // 上传前类型检测
    beforeAvatarUpload(file) {
      // 文件上传之前调用做一些拦截限制
      const isLt2M = file.size / 1024 / 1024 < 10
      const isJPG = file.type === 'image/png' ? file.type : false
      if (!isJPG) {
        this.$message.error(`上传图片格式为png`)
        return
      }
      if (!isLt2M) {
        this.$message.error(`上传图片大小不能超过 ${this.limitSize}M!`)
        return
      }
      const _this = this
      let imgWidth = ''
      let imgHight = ''
      const isSize = new Promise(function(resolve, reject) {
        const _URL = window.URL || window.webkitURL
        const img = new Image()
        img.onload = function() {
          imgWidth = img.width
          imgHight = img.height
          const valid = img.width === parseInt(_this.picWidth) && img.height === parseInt(_this.picHeight)
          valid ? resolve() : reject()
        }
        img.src = _URL.createObjectURL(file)
      }).then(() => {
        return file
      }, () => {
        _this.$message.warning({ message: `上传文件的图片大小不合符标准,宽需要为${_this.picWidth}px，高需要为${_this.picHeight}px。当前上传图片的宽高分别为：${imgWidth}px和${imgHight}px` })
        return Promise.reject()
      })
      return isSize
    },
    // 上传成功
    handleAvatarSuccess(res, f, fs) {
      // 图片上传成功
      if (res.status !== 200) {
        this.$message.error('上传失败!')
        fs.pop()
      } else {
        this.$emit('picChange', res.data)
      }
    },
    // 图片上传超过数量限制
    handleExceed() {
      this.$message.error('只能上传单文件!')
    },
    // 接口报错
    imgUploadError(err) {
      // 图片上传失败调用
      this.$message.error('上传失败!' + err)
      this.$emit('picChange', null)
    },
    handleChange(files, fileList) {
      this.hideUpload = fileList.length >= this.limitCount
    }
  }
}
</script>

<style lang="scss" scoped>
.upload-demo {
  > > > .el-upload-dragger {
    width: 100px;
    height: 100px;
  }

  > > > .el-upload-dragger {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  > > > .el-upload-dragger .el-icon-upload {
    margin: 0;
  }
}

.hide .el-upload--picture-card {
  display: none;
}
</style>