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

Posted 2023-03-26

参考技术A 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);

            ;

         

        ;

      );

    ,