高效实现需求的方法，就是避免重复造轮子。图片裁剪的插件也不少，这里我选择 vue-cropper，原因是功能强大、简单易上手。话不多说，上效果图：

效果图

安装

npm install vue-cropper
复制代码

使用

import { VueCropper } from 'vue-cropper'
复制代码

代码实现

以 element-ui + vue-cropper 为例实现头像裁剪

src/App.vue

复制代码

src/components/avatarCropper.vue

"scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  .reupload {
    color: #409eff;
    cursor: pointer;
  }
}
.avatar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 560px;
  height: 400px;
  background-color: #f0f2f5;
  margin-right: 10px;
  border-radius: 4px;
  .upload {
    text-align: center;
    margin-bottom: 24px;
  }
  .avatar-crop {
    width: 560px;
    height: 400px;
    position: relative;
    .crop-box {
      width: 100%;
      height: 100%;
      border-radius: 4px;
      overflow: hidden;
    }
  }
}

复制代码

总结

裁剪完成之后可以获取到 base64 和 blob 数据，然后上传至后端。vue-cropper 还有众多属性和方法，用起来都很方便，有兴趣的同学可以实现一下实时预览。

文档地址：github.com/xyxiao001/v…^[2]