Upload组件上传限制（宽、高、尺寸、格式）

iview-Upload组件官网链接： https://iview.github.io/components/upload

效果展示

css

.out-box{

width: 100%

border: 1px solid #e6e6e6

border-radius: 8px

padding: 20px 20px 10px

}

.img-border{

border: 1px solid #e6e6e6

border-radius: 8px

margin-right: 20px

width:100px

height:100px

}

.upload-box{

width: 100px

height:100px

display: inline-block

}

.upload-inner-box{

width: 100px

height: 100px

font-size: 40px

text-align: center

background: #F5F5F5

}

.upload-tip{

color:red

}

template

<div class="out-box">

<img class="img-border" v-if="seeView" :src="this.imageUrl"  />

<Upload ref="uploadFiles"

:show-upload-list="false"

:max-size="5120"

:on-success="handleSuccess"

:on-exceeded-size="handleMaxSize"

:before-upload="beforeUploadImg"

:loading="true"

type="清轮洞drag"

:format="['jpg','jpeg','png','gif']"

:on-format-error="handleFormatError"

action="url"

class="upload-box">

                <div class="upload-inner-box">

                <div style="padding-top: 20px">+</div>

                <div style="font-size: 12px">请上传图片</div>

</div>

</Upload>

<div class="upload-tip">图片大小勿超5M，尺寸为{{minWidth}}*{{minHeight}}，勿小于该尺寸，且尽量以该长宽比制图以保证页面效果</div>

</div>

data

seeView:"false",//是否展示已上传的图片桐仔

imageUrl:"",//上传图片的url

url:"",//上传的地答枯址

minWidth:number,//最小宽度

minHeight:number,//最小高度

methods

//上传成功

    handleSuccess(response, file, fileList) {

      this.imageUrl = response.result

      this.seeView = true

    },

    //上传的文件大小超出要求

    handleMaxSize() {

      this.$Modal.warning({

        title: "提示",

        content: "上传缩略图大小不能超过5M!!!",

      })

    },

    //上传文件格式不符合要求

    handleFormatError() {

      this.$Modal.warning({

        title: "提示",

        content: "上传缩略图格式错误!!!",

      })

    },

    //上传前对图片宽高的检验

    beforeUploadImg(file) {

      this.checkImageWidth(file, minWidth).then((checkWidth) =>{

        if (checkWidth) {

          this.checkImageHeight(file, minHeight).then((checkHeight) =>{

            if (checkHeight) {

              this.$refs.uploadFiles.post(file)

            }

          })

        }

      })

      return false

    },

    // 异步方法 检验图片宽度

    async checkImageWidth(file, widthCheck) {

      let width = await this.getImageWidth(file)

      let checkWidth = width >widthCheck || width == widthCheck

      if (!checkWidth) {

        this.$Notice.warning({

          title: "图片宽度错误",

          desc:

            file.name +

            " 的宽度为" +

            width +

            "px, 请上传宽度大于" +

            widthCheck +

            "px的图片. ",

        })

      }

      return checkWidth

    },

    // 获取图片宽度

    getImageWidth(file) {

      return new Promise((resolve) =>{

        const reader = new FileReader()

        reader.readAsDataURL(file)

        reader.onload = function () {

          if (reader.readyState == 2) {

            const img = new Image()

            img.src = reader.result

            img.onload = function () {

              resolve(this.width)

            }

          }

        }

      })

    },

    // 异步方法 检验图片高度

    async checkImageHeight(file, heightCheck) {

      let height = await this.getImageHeight(file)

      let checkHeight = height >heightCheck || height == heightCheck

      if (!checkHeight) {

        this.$Notice.warning({

          title: "图片高度错误",

          desc:

            file.name +

            " 的高度为" +

            height +

            "px, 请上传高度大于" +

            heightCheck +

            "px的图片. ",

        })

      }

      return checkHeight

    },

    // 获取图片宽度

    getImageHeight(file) {

      return new Promise((resolve) =>{

        const reader = new FileReader()

        reader.readAsDataURL(file)

        reader.onload = function () {

          if (reader.readyState == 2) {

            const img = new Image()

            img.src = reader.result

            img.onload = function () {

              resolve(this.height)

            }

          }

        }

      })

    },

这几天颤李遇到一个问题，在Upload组件中上传之前需要添加一个Modal，阻止上传， 提示用户信息，用户点击确认按钮后，再进行上传，

理想总是很丰满，过程真是狗血呀

于是在API 也茄信迟找到了方法，提供了坦卖一个before-upload方法可以使用，于是乎，兴高采烈的再before-upload中写了

---