图片上传尺寸限制

使用ant desgin vue组件、实现图片上传限制图片尺寸范围

（1）需要控制上传图片的比例
（2）上传图片的数量
（3）如果上传图片尺寸影响展示效果，给出相应提示

实现效果图：

点击查看代码

<template>
<a-modal
      title="意见提交"
      :visible.sync="visible"
      width="550px"
      class="modal-submit"
      @ok="handleSubmit"
    >
      <a-form :form="form" :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }">
        <a-form-item label="意见标题">
          <a-input
            placeholder="请输入意见标题"
            v-decorator="['title', { rules: [{ required: true, message: '请输入意见标题' }] }]"
          />
        </a-form-item>
        <a-form-item label="意见内容" style="margin-top: 20px;">
          <a-textarea
            v-decorator="['content', { rules: [{ required: true, message: '请输入意见内容' }] }]"
            placeholder="请输入审查意见内容"
            :rows="5"
          />
        </a-form-item>
        <a-form-item label="上传图片"  style="margin-top: 20px;">
          <a-upload
            class="upload"
            accept="image/png, image/jpeg"
            v-decorator="['files']"
            list-type="picture-card"
            :file-list="fileList"
            :before-upload="beforeUpload"
            @change="handleChange"
          >
            <div v-if="fileList.length < 3">
              <a-icon type="plus" :style="{ fontSize: '26px'}"/>
            </div>
          </a-upload>
          <p style="color: red;font-size: 14px;margin: 0;">*最多可上传三张比例为16:9的图片</p>
        </a-form-item>
      </a-form>
    </a-modal>
</template>
<script>
export default {
  name: 'Rate',
  components: {

  },
  data() {
    return {
      fileList: [],
      visible: false,
      form: this.$form.createForm(this, { name: 'submit' }),
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleOk(e) {
      this.visible = false;
    },
    handleSubmit() {
		//调图片上传的接口进行意见提交
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
    },
    ruleImageSize(file) {
      return new Promise((resolve, reject) => {
	  //
        let fileReader = new FileReader();
		//2、文件读取成功时会自动触发onload函数
        fileReader.onload = (e) => {
		//获取到图片的base64地址
          let src = e.target.result;
          const image = new Image();
		  //图片加载完自动触发onload函数
          image.onload = () => {
            let res = (image.width / image.height).toFixed(2);
            const num = parseFloat(res); //特别注意，这个地方的res是字符串类型
			//1.78是16/9保留两位小数得到的结果
			//1.5是14/9，设置下限，避免图片尺寸差异太大
              let flag = num > 1.5 && num <= 1.78;
              if (!flag) {
			  //如果图片尺寸不符，抛出异常
                reject(new Error('图片尺寸不符，请上传比例为16:9的图片'));
              } else {
                resolve(true);
              }
          };
		  //图像加载完成，会触发onerror属性指定的回调函数。
          image.onerror = reject;
		  //将获取到的图片base64赋值给创建的image图片对象
		  //注意：src 属性一定要写到 onload 的后面，否则程序在 IE 中会出错
          image.src = src;
        };
		//1、将读取到的文件编码成DataURL地址，如果是图片转成base64地址
        fileReader.readAsDataURL(file);
      });
    },
    beforeUpload(file) {
	//图片上传前处理
      this.ruleImageSize(file).then((res) => {
	  //图片尺寸符合的操作
        console.log(res);
      }).catch((error) => {
	  //图片尺寸不符合的操作
        console.log(error);
        this.$message.warning('图片尺寸不符，会影响后期展示效果，请换图上传！');
      });
      return false;
    },
  },
};
</script>