vue判断图片大小并提示及图片压缩功能实现

<el-col :span="9" v-if="ubo.uboIdDocType === 'IDENTIFICATION_TYPE_IDCARD'">
  <el-form-item label="证件反面照片" prop="uboIdDocCopyBack">
    <el-upload :action="uploadUrl" :headers="uploadRequestHeaders" list-type="picture-card"
               :show-file-list="false" :multiple="false" accept="video/*"
               :on-success="handleuboIdDocCopyBackSuccess"
               :before-upload="beforeAvatarUpload">  //图片上传前的操作
      <img v-if="uboIdDocCopyBackImageFile" :src="uboIdDocCopyBackImageFile" class="img">
      <i v-else class="el-icon-plus"></i>
    </el-upload>
  </el-form-item>
</el-col>

1.判断图片大小并终止上传，终止上传return false就可以了

beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 0.488;
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 500KB!");
        return false
      }
}

2  vue图片压缩功能

2.1  安装依赖

npm i image-conversion

2.2  页面中引入

import * as imageConversion from 'image-conversion'

2.3  使用

beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 0.488;
      if (!isLt2M) {    //图片超过500KB
          return new Promise((resolve) => {
              // 压缩到500KB,这里的500就是要压缩的大小,可自定义
              imageConversion.compressAccurately(file, 500).then(res => {
                console.log(res)
                resolve(res);
              });
          })
      }
},