图片上传尺寸限制

使用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="内容">
          <a-textarea
            v-decorator="['content', { rules: [{ required: true, message: '请输入内容' }] }]"
            placeholder="请输入内容"
            :rows="5"
          />
        </a-form-item>
        <a-form-item label="上传图片">
          <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;margin: 0;">*最多可上传三张比例为16:9的图片</p>
        </a-form-item>
      </a-form>
    </a-modal>
</template>
<script>
export default {
  name: 'Submit',
  data() {
    return {
      fileList: [],
      visible: false,
      form: this.$form.createForm(this, { name: 'submit' }),
    };
  },
  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>