vue2 头像上传+裁剪组件封装

背景：最近在进行公司业务开发时，遇到了头像上传限制尺寸的需求，即限制为一寸证件照（宽295像素，高413像素）。

用到的第三方库： "vue-cropper": "^0.5.5"

完整组件代码：

avatarUpload.vue

<!-- 上传图片并裁剪 -->
<template>
  <div :style="{ marginTop: marginTop + 'px' }">
    <!-- 上传 -->
    <template>
      <div class="preview-img" v-show="previewImg" :style="{ width: uploadWidth + 'px', height: uploadHeight + 'px' }">
        <div class="preview-img-box" :style="{ lineHeight: uploadHeight + 'px' }">
          <i v-if="!disabled" class="el-icon-delete" @click="deleteFn"></i>
          <i class="el-icon-view" @click="viewFn"></i>
          <i v-if="!disabled" class="el-icon-refresh" @click="refreshFn"></i>
        </div>        
        <img :src="previewImg" :style="{ width: '100%', height: '100%', objectFit: objectFit }" />
      </div>

      <el-upload v-show="!previewImg" ref="upload" class="upload-demo"
        :style="{ width: uploadWidth + 'px', height: uploadHeight + 'px' }" :action="actionUrl"
        :on-change="handleChangeUpload" :auto-upload="false" :show-file-list="false" :disabled="disabled">
        <div class="upload-demo-icon" :style="{
          width: uploadWidth + 'px',
          height: uploadHeight + 'px',
          lineHeight: uploadHeight + 'px',
        }">
          +
        </div>
      </el-upload>
    </template>
    <!-- 裁剪 -->
    <el-dialog title="图片剪裁" :visible.sync="dialogVisible" class="crop-dialog" append-to-body>
      <div style="padding: 0 20px">
        <div :style="{
          textAlign: 'center',
          width: cropperWidth != 0 ? cropperWidth + 'px' : 'auto',
          height: cropperHeight + 'px',
        }">
          <VueCropper ref="cropper" :img="cropperImg" :output-size="outputSize" :output-type="outputType" :info="info"
            :full="full" :can-move="canMove" :can-move-box="canMoveBox" :original="original" :auto-crop="autoCrop"
            :can-scale="canScale" :fixed="fixed" :fixed-number="fixedNumber" :fixed-box="fixedBox"
            :center-box="centerBox" :info-true="infoTrue" :auto-crop-width="autoCropWidth"
            :auto-crop-height="autoCropHeight" />
        </div>
      </div>
      <!-- 这里的按钮可以根据自己的需求进行增删-->
      <div class="action-box" v-if="actionButtonFlag">
        <el-upload action="#" :auto-upload="false" :show-file-list="false" :on-change="handleChangeUpload"
          style="margin-right: 15px">
          <el-button title="更换图片" plain circle type="primary" icon="el-icon-refresh"></el-button>
        </el-upload>
        <el-button title="清除图片" plain circle type="primary" icon="el-icon-close" @click="clearImgHandle"></el-button>
        <el-button title="向左旋转" plain circle type="primary" icon="el-icon-refresh-left"
          @click="rotateLeftHandle"></el-button>
        <el-button title="向右旋转" plain circle type="primary" icon="el-icon-refresh-right" @click="rotateRightHandle">
        </el-button>
        <el-button title="放大" plain circle type="primary" @click="changeScaleHandle(1)" icon="el-icon-zoom-in">
        </el-button>
        <el-button title="缩小" plain circle type="primary" @click="changeScaleHandle(-1)" icon="el-icon-zoom-out">
        </el-button>
        <!-- <el-button type="primary" @click="fixed = !fixed">
            {{ fixed ? "固定比例" : "自由比例" }}
          </el-button> -->
        <el-button title="下载" plain circle type="primary" icon="el-icon-download"
          @click="downloadHandle('blob')"></el-button>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="finish">
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { VueCropper } from "vue-cropper";
import { insertImage } from '@/api/file';
export default {
  name: "Cropper",
  components: {
    VueCropper,
  },
  props: {
    marginTop: {
      type: Number,
      default: 0,
    },
    // 上传属性

    // 图片路径
    imgSrc: {
      type: String,
      default: "",
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    // 列表索引
    listIndex: {
      type: Number,
      default: null,
    },
    // 上传路径
    actionUrl: {
      type: String,
      default: "#",
    },
    // 上传宽度
    uploadWidth: {
      type: Number,
      default: 100,
    },
    // 上传高度
    uploadHeight: {
      type: Number,
      default: 100,
    },
    // 图片显示角度 传值详情参考mdn object-fit
    objectFit: {
      type: String,
      default: "fill",
    },

    // 裁剪属性

    // 裁剪弹出框的宽度
    cropperWidth: {
      type: Number,
      default: 0,
    },
    // 裁剪弹出框的高度
    cropperHeight: {
      type: Number,
      default: 600,
    },
    // 裁剪生成图片的质量 0.1-1
    outputSize: {
      type: Number,
      default: 1,
    },
    // 裁剪生成图片的格式
    outputType: {
      type: String,
      default: "png",
    },
    // 裁剪框的大小信息
    info: {
      type: Boolean,
      default: true,
    },
    // 是否输出原图比例的截图
    full: {
      type: Boolean,
      default: false,
    },
    // 截图框能否拖动
    canMove: {
      type: Boolean,
      default: true,
    },
    // 截图框能否拖动
    canMoveBox: {
      type: Boolean,
      default: true,
    },
    // 上传图片按照原始比例渲染
    original: {
      type: Boolean,
      default: true,
    },
    // 是否默认生成截图框
    autoCrop: {
      type: Boolean,
      default: true,
    },
    // 图片是否允许滚轮缩放
    canScale: {
      type: Boolean,
      default: true,
    },
    // 是否开启截图框宽高固定比例
    fixed: {
      type: Boolean,
      default: true,
    },
    // 截图框的宽高比例 开启fixed生效
    fixedNumber: {
      type: Array,
      default: () => [5, 7],
    },
    // 固定截图框大小 不允许改变
    fixedBox: {
      type: Boolean,
      default: true,
    },
    // 截图框是否被限制在图片里面
    centerBox: {
      type: Boolean,
      default: true,
    },
    // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
    infoTrue: {
      type: Boolean,
      default: true,
    },
    // 默认生成截图框宽度
    autoCropWidth: {
      type: Number,
      default: 295,
    },
    // 默认生成截图框高度
    autoCropHeight: {
      type: Number,
      default: 413,
    },
    // 是否出现操作按钮
    actionButtonFlag: {
      type: Boolean,
      default: false,
    },
    // 裁剪路径输出格式 base64：base64； blob:blob;
    cropFormat: {
      type: String,
      default: "blob",
    },
    // 图片最大宽度
    maxImgWidth: {
      type: Number,
      default: 648,
    },
    // 图片最大高度
    maxImgHeight: {
      type: Number,
      default: 1152,
    },
    // 头像扫描件id
    txsmjid: {
      type: String,
      default: ""
    },
    // 是否禁用上传
    disabled:{
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      previewImg: "", // 预览图片地址
      dialogVisible: false, //图片裁剪弹框
      cropperImg: "", // 裁剪图片的地址
      loading: false, // 防止重复提交
      baseCsUrl: process.env.NODE_ENV === 'production' ? window.globalConfig.VUE_APP_BASE_API_CS : process.env.VUE_APP_BASE_API_CS, // 文件服务器地址
      fileName: "",
    };
  },
  watch: {
    imgSrc: {
      handler(newVal, oldVal) {
        this.previewImg = newVal;
      },
      deep: true, // 深度监听
      immediate: true, // 首次进入就监听
    },
  },
  methods: {
    // 上传按钮 限制图片大小和类型
    handleChangeUpload(file) {
      this.fileName = file.name;
      const isJPG =
        file.raw.type === "image/jpeg" || file.raw.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      const min_isLt = file.size / 1024 > 20;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return false;
      }
      if (!min_isLt) {
        this.$modal.msgError("头像大小不能小于 20 K!");
        return false;
      }
      // 上传成功后将图片地址赋值给裁剪框显示图片
      this.$nextTick(async () => {
        // base64方式
        // this.option.img = await fileByBase64(file.raw)
        this.cropperImg = URL.createObjectURL(file.raw);
        this.loading = false;
        this.dialogVisible = true;
      });
    },
    // 放大/缩小
    changeScaleHandle(num) {
      num = num || 1;
      this.$refs.cropper.changeScale(num);
    },
    // 左旋转
    rotateLeftHandle() {
      this.$refs.cropper.rotateLeft();
    },
    // 右旋转
    rotateRightHandle() {
      this.$refs.cropper.rotateRight();
    },
    // 下载
    downloadHandle(type) {
      let aLink = document.createElement("a");
      aLink.download = "author-img";
      if (type === "blob") {
        this.$refs.cropper.getCropBlob((data) => {
          aLink.href = URL.createObjectURL(data);
          aLink.click();
        });
      } else {
        this.$refs.cropper.getCropData((data) => {
          aLink.href = data;
          aLink.click();
        });
      }
    },
    // 清理图片
    clearImgHandle() {
      this.cropperImg = "";
    },
    // 截图
    finish() {
      if (this.cropFormat == "base64") {
        // 获取截图的 base64 数据
        this.$refs.cropper.getCropData((data) => {
          this.loading = true;
          this.dialogVisible = false;

          this.getImgHeight(data, this.maxImgWidth, this.maxImgHeight).then(
            (imgUrl) => {
              // console.log(imgUrl, "base64");
              this.previewImg = imgUrl;
              if (this.listIndex !== null) {
                this.$emit("successCheng", this.previewImg, this.listIndex);
              } else {
                this.$emit("successCheng", this.previewImg);
              }
            }
          );
        });
      } else if (this.cropFormat == "blob") {
        // 获取截图的 blob 数据
        this.$refs.cropper.getCropBlob((blob) => {
          this.loading = true;
          // this.dialogVisible = false;

          this.getImgHeight(
            URL.createObjectURL(blob),
            this.maxImgWidth,
            this.maxImgHeight
          ).then((imgUrl) => {
            // console.log(imgUrl, "blob");
            this.previewImg = imgUrl;
            if (this.listIndex !== null) {
              this.$emit("successCheng", this.previewImg, this.listIndex);
            } else {
              this.$emit("successCheng", this.previewImg);
            }
          });

          this.uploadImage(blob)
        });
      }
    },
    // 上传到后端
    uploadImage(blob) {
      let file = new File([blob], this.fileName, {
        type: "image/png",
        lastModified: Date.now(),
      });
      let fd = new FormData();
      fd.append("file", file);
      insertImage(fd, this.txsmjid).then((res) => {
        // console.log("图片上传", res);
        this.dialogVisible = false;
        if (res.code === 200) {
          this.$modal.msgSuccess("上传成功");
        }
      }).finally(() => {
        this.loading = false;
      });
    },

    // 预览图片
    viewFn() {
      let preIndex = 0;
      this.$viewerApi({
        images: [this.previewImg],
        options: {
          initialViewIndex: preIndex,
        },
      });
    },
    // 删除图片
    deleteFn() {
      this.previewImg = "";
      // this.$emit("deleteCheng");
    },
    // 更换图片
    refreshFn() {
      this.$refs["upload"].$refs["upload-inner"].handleClick();
    },
    // 获取图片高度并修改
    getImgHeight(imgSrc, scaleWidth = 648, scaleHeight = 1152) {
      return new Promise((resolve, reject) => {
        const img = new Image(); // 创建一个img对象
        img.src = imgSrc; // 设置图片地址
        let imgUrl = ""; // 接收图片地址
        img.onload = () => {
          if (img.width > scaleWidth || img.height > scaleHeight) {
            const canvas = document.createElement("canvas");
            const context = canvas.getContext("2d");
            canvas.width = scaleWidth;
            canvas.height = scaleHeight;
            context.drawImage(img, 0, 0, scaleWidth, scaleHeight);
            if (this.cropFormat == "blob") {
              imgUrl = this.base64toBlob(
                canvas.toDataURL("image/png", 1),
                "image/png"
              );
            } else {
              imgUrl = canvas.toDataURL("image/png", 1);
            }
            resolve(imgUrl);
          } else {
            imgUrl = imgSrc;
            resolve(imgUrl);
          }
        };
      });
    },
    // base64转blob
    base64toBlob(base64, type = "application/octet-stream") {
      // 去除base64头部
      const images = base64.replace(/^data:image\/\w+;base64,/, "");
      const bstr = atob(images);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return URL.createObjectURL(new Blob([u8arr], { type }));
    },
  },
};
</script>

<style lang="scss" scoped>
.preview-img {
  position: relative;
  cursor: pointer;

  &:hover {
    .preview-img-box {
      display: block;
    }
  }
}

.preview-img-box {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(30, 28, 28, 0.5);
  display: none;
  color: #d9d9d9;
  font-size: 24px;
  text-align: center;
}

.preview-img-number {
  width: 20px;
  height: 20px;
  overflow: hidden;
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: rgba(8, 137, 53, 1);
  color: #d9d9d9;
  font-size: 20px;
  text-align: center;
  border-radius: 50%;
}

.upload-demo {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
}

.upload-demo-icon {
  font-size: 60px;
  color: #8c939d;
  text-align: center;
}

.crop-dialog {
  .action-box {
    margin: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    button {
      margin-top: 15px;
      //width: 80px;
      margin-right: 15px;
    }
  }

  .dialog-footer {
    text-align: center;

    button {
      width: 100px;
    }
  }
}
</style>

使用组件：

<template>
    <div>
     <!-- 图片裁剪 -->
     <avatarUpload :key="new Date().getTime()" :imgSrc="imageUrl" :uploadWidth="148" :uploadHeight="207" :actionButtonFlag="true" :objectFit="'cover'" 
class="avatar-uploader" :txsmjid="txsmjid">
    </avatarUpload>
    </div>
</template>
<script>
import avatarUpload from "./avatarUpload.vue";
export default {
  components: {
    avatarUpload,
  },
  data() {
     imageUrl:'',
     txsmjid:'',
  }      
}
</script>