图片上传之限制图片的类型，大小，尺寸

最新推荐文章于 2024-06-29 16:57:52 发布

默一涵

最新推荐文章于 2024-06-29 16:57:52 发布

阅读量540

点赞数 21

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Sunlight_jw/article/details/140036892

版权

一、引入el-upload组件

<el-upload
   ref="smallTwoImg"
   class="avatar-uploader"
   :action="smallTwoActionUrl"
   :show-file-list="false"
   :on-success="handleSmallTwoImg"
   :on-error="handleSmallError"
   :before-upload="beforeUploadSmallTwoImg"
   :headers="headerToken"
   >
    <img v-if="photoId" :src="photoId" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
  <p>
    小二寸蓝底证件照<span style="color: red"
   >（格式：413*579）</span
   >
  </p>

二、相关方法

    // 小二寸证件照上传之前的事件
    beforeUploadSmallTwoImg(file) {
      if (!file) {
        this.$emit.error("上传错误");
        return false;
      }
      const isJpgPng = file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgPng) {
        this.$message.error("上传图片只能是 JPG/PNG 格式!");
        return false;
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
        return false;
      }
      // 新增图片尺寸验证部分
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (e) => {
          const img = new Image();
          img.src = e.target.result;
          img.onload = () => {
            const { width, height } = img;
            if (width !== 413 || height !== 579) {
              this.$message.error("图片尺寸必须为413px*579px!");
              reject(new Error("尺寸不符"));
            } else {
              resolve(true);
            }
          };
          img.onerror = reject;
        };
        reader.readAsDataURL(file);
      });
    },
    // 小二寸证件照上传成功时
    handleSmallTwoImg(response, file, fileList) {
      if (response.code == 0) {
        // console.log(response, 12);
        this.ruleForm.idPhoto = response.message;
        this.photoId = response.message;
        // console.log(file);
      } else {
        this.$message.error("上传错误");
      }
    },