vue实现图片裁剪后上传

本文实例为大家分享了vue实现图片裁剪后上传的具体代码，供大家参考，具体内容如下

一、背景

目前负责的系统（商城后台管理系统）里面有这么一个需求，为了配合前台的展示，上传的商品图片比较必须是1:1的正方形。（其它地方有时会有5:4或者16:9的需求，但较少）。所以需要对上传的图片先进行裁剪，并且按要求只能裁剪为1:1，然后在进行上传。

当然，为了兼容系统其它地方有5:4或者16:9的图片比例需求，需要给出一个参数，可以随时控制图片裁剪的比例。

二、使用什么插件实现

使用 vue-cropper 显示，该插件是基于 cropper 的二次封装，简单小巧，更合适vue项目。注意：功能没有 cropper 强大。

三、使用 cropper

3.1 封装一下cropper， 配置自己想要的参数

 

 

.Cropper {
 .cropper-el {
 height: 700px;
 width: 700px;
 flex-shrink: 0;
 }
 .cropper-container {
 display: flex;
 justify-content: space-between;
 .prive-el {
  flex: 1;
  align-self: center;
  text-align: center;
  .prive-style {
  margin: 0 auto;
  flex: 1;
  -webkit-flex: 1;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  overflow: hidden;
  background: #ededed;
  margin-left: 40px;
  }
  .preview {
  overflow: hidden;
  }
  .el-button {
  margin-top: 20px;
  }
 }
 }
}


.cropper-box-canvas img{
 width: 100% !important;
 height: 100% !important;
}

3.2 将 el-upload 和 cropper 组合，封装，其他地方可以直接调用

 

 

.cropper-upload-box{
 display: flex;
 .el-upload{
 width: 148px;
 height: 148px;
 }
}

3.3 其他页面中调用裁剪组件

自此，图片裁剪功能实现！！！

3.4 看一下页面中的效果

​​​​​​​以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。