【ant design vue】a-upload组件上传文件大小、格式、数量 以及 像素限制

在这里我们使用的是ant design vue组件库的a-upload组件
首先，在H5里边放入a-table组件

<a-upload
  :multiple="true"
  list-type="picture-card"
  :file-list="fileList"
  action="/api/api-system/system/core/sysFile/upload"
  @change="handleUpload"
  :remove="removeFile"
  @preview="handlePreview"
  :beforeUpload="beforeFileUpload"
  v-model="mdl.trademarkImage"
  :disabled="readonly"
>
  <div v-if="fileList.length < 1">
    <a-icon type="plus" />
   <div class="ant-upload-text">上传商标图样</div>
  </div>
</a-upload>

在组件库描述中写了，做显示主要是利用组件的beforeUpload 的Api

    beforeFileUpload(file, fileList) {
      var this_ = this
      this.loading = true
      return new Promise((resolve, reject) => {
        const isLt2KB = file.size / 1024 < 200
        if (!isLt2KB) {
          this_.$message.error('上传文件大于200kb!')
          reject(false)
        }
        if (fileList.length > 1 || this.isFlag >= 1 || this_.fileList.length >= 1) {
          this_.fileList = this_.fileList.slice(-1)
          this_.$message.error('只能上传一张图片！')
          reject(false)
        }
        var fileNames = file.name.split('.')
        var fileType = fileNames[fileNames.length - 1].toLocaleLowerCase()
        var extList = ['jpg', 'png', 'gif']
        if (!extList.find((item) => item == fileType)) {
          this_.$message.error('只能上传.jpg/.png/.gif类型的图片！')
          reject(false)
        }

        let width1 = 400
        let height1 = 400
        let width2 = 1500
        let height2 = 1500
        let _URL = window.URL || window.webkitURL
        let img = new Image()
        img.onload = function () {
          let valid = img.width >= width1 && img.width <= width2 && img.height >= height1 && img.height <= height2
          valid ? resolve() : reject()
          if (!valid) {
            this_.$message.error('上传图片像素介于"400×400－1500×1500之间!')
            reject(false)
          } else {
            resolve(true)
          }
        }
        img.src = _URL.createObjectURL(file)
      }).finally(() => {
        this.loading = false
      })
    },