vue+element-ui upload前端js压缩图片上传

安装image-conversion包

npm i image-conversion --save

<template>
  <div>
  <el-upload
      v-model="dialogImageUrl"
      :headers="headers"
      :action="你服务器"
      :show-file-list="false"
      :before-upload="beforeUpload"
      :on-success="handleSuccess"
      class="avatar-uploader"
      accept=".jpg,.jpeg,.png,.gif"
    >
      <img v-if="dialogVisible" :src="dialogImageUrl" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
  </div>
</template>

// 引入image-conversion
import * as imageConversion from "image-conversion";
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  methods: {
    // 第一种,不考虑图片长宽,只考虑图片大小的情况,图片超过4M就压缩
    beforeUpload(file) {
      console.log(file, '111111方法1');
      return new Promise((resolve, reject) => {
        let isLt2M = file.size / 1024 / 1024 < 4; // 判定图片大小是否小于4MB
        if (isLt2M) {
          console.log("小于4m");
          resolve(file);
        } else {
          // 压缩到400KB,这里的400就是要压缩的大小,可自定义
          imageConversion.compressAccurately(file, 400).then((res) => {
            console.log(res, 111112);
            resolve(res);
          });
        }
      });
    },
    //第二种,图片大小超过4M,长度超过2000就压缩
    beforeUpload2(file) {
        console.log(file, "111111方法2");
      // 图片不大于4m,宽度不大于2000
      return new Promise((resolve, reject) => {
        let _URL = window.URL || window.webkitURL;
        let isLt2M = file.size / 1024 / 1024 > 4; // 判定图片大小是否小于4MB
        // 这里需要计算出图片的长宽
        let img = new Image();
        img.onload = function () {
          file.width = img.width; // 获取到width放在了file属性上
          file.height = img.height; // 获取到height放在了file属性上
          let valid = img.width > 2000; // 图片宽度大于2000
          // 这里我只判断了图片的宽度,compressAccurately有多个参数时传入对象
          if (valid || isLt2M) {
            imageConversion
              .compressAccurately(file, {
                size: 400,
                width: 2000,
              })
              .then((res) => {
                 console.log(res, 111112);
                resolve(res);
              });
          } else resolve(file);
        }; // 需要把图片赋值
        img.src = _URL.createObjectURL(file);
      });
    },
    handleSuccess(response, file, fileList) {
      if (response.errno === 0) {
        this.dialogImageUrl = response.data.url;
      }
      this.dialogVisible = true;
    },
  },
};

<style >
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

感谢最近有小伙伴反应有问题，我重新更新了一下，亲测有效
之前的 import imageConversion from 'image-conversion’现在不行了，
换成 import * as imageConversion from “image-conversion”;就可以了