文章目录

• 0. 前言
• 1. 裁剪效果（可实时预览）
• 2. 安装 cropper
• 3. 引入 Vue Cropper
• • 3.1 局部引入（推荐使用）
  • 3.2 全局引入
• 4. 在代码中使用
• • 4.1 template部分
  • 4.2 script部分
• 5. 注意事项
• 6. SpringBoot 后端接收图片
• • 6.1 UserController.java
  • 6.2 Result.java
• 7. 完整的示例代码
• • 7.1 Homeview.vue
  • 7.2 request.js
  • 7.3 main.js
  • 7.4 vite.config.js
• 8. 完整的源代码

0. 前言

裁剪头像的需求十分常见，主要目的是为了统一用户头像的尺寸，避免因为用户上传的图片尺寸大小不一致导致页面布局出现问题

高效实现需求的方法，就是避免重复造轮子，在这里推荐使用 cropper 实现头像裁剪功能 (原因是 cropper 功能强大、上手简单、文档详细)

cropper 的Gitee地址：vue-cropper

cropper Vue3在线示例：cropper Vue3在线示例

1. 裁剪效果（可实时预览）

2. 安装 cropper

# npm 安装 npm install vue-cropper@next 

# yarn 安装 yarn add vue-cropper@next 

3. 引入 Vue Cropper

3.1 局部引入（推荐使用）

哪个组件需要使用 Vue Cropper，就在哪个组件导入

import 'vue-cropper/dist/index.css' import { VueCropper }  from 'vue-cropper' 

3.2 全局引入

main.js 文件

import VueCropper from 'vue-cropper' import 'vue-cropper/dist/index.css'  const app = createApp(App) app.use(VueCropper) app.mount('#app') 

4. 在代码中使用

注意事项：

要为 组件设置宽和高，并用一个外层容器包裹 组件

4.1 template部分

4.2 script部分

const option = ref({   autoCrop: true, // 是否默认生成截图框   autoCropHeight: '240px', // 默认生成截图框宽度(默认值：容器的 80%, 可选值：0 ~ max), 真正裁剪出来的图片的宽度为 autoCropHeight * 1.25   autoCropWidth: '240px', // 默认生成截图框宽度(默认值：容器的 80%, 可选值：0 ~ max), 真正裁剪出来的图片的宽度为 autoWidth * 1.25   canMove: true, // 上传图片是否可以移动   canScale: true, // 图片是否允许滚轮缩放   centerBox: true, // 截图框是否被限制在图片里面   fixed: true, // 是否固定截图框的宽高比例   fixedBox: true, // 是否固定截图框大小   fixedNumber: [1, 1], // 截图框的宽高比例([ 宽度 , 高度 ])   img: 'https://img2.baidu.com/it/u=2339635883,2403687892&fm=253&fmt=auto&app=138&f=JPEG', // 裁剪图片的地址(可选值：url 地址, base64, blob)   infoTrue: true, // infoTrue为 true 时显示预览图片的宽高信息,infoTrue为 false 时表示显示裁剪框的宽高信息   mode: 'contain', // 截图框可拖动时的方向(可选值：contain , cover, 100px, 100% auto)   origin: false, // 上传的图片是否按照原始比例渲染   outputSize: 1, // 裁剪生成图片的质量(可选值：0.1 ~ 1)   outputType: 'png', // 裁剪生成图片的格式(可选值：png, jpeg, webp) })  // 实时预览 const realTime = (data) => {   // console.log('realTime data =', data)   previews.value = data } 

5. 注意事项

1. cropper 对象的 getCropBlob 方法和 getCropData 方法都是异步方法
2. 虽然 getCropBlob 获取的的 Blob 对象在控制台打印时只有 size 和 type 属性，但是仍然可以使用window.URL.createObjectURL(blob)来生成 url ，从 Java 的角度来说，相当于重写了 Blob 类的 toString 方法
3. 前端用 formData 上传文件时， key 要与后端接口中 @RequestParam(“avatar”) 指定的参数名一致

6. SpringBoot 后端接收图片

后端环境：

• JDK：17.0.7
• SpringBoot：3.0.2

6.1 UserController.java

import cn.edu.scau.controller.vo.Result; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.multipart.MultipartFile;  import java.io.File; import java.io.IOException; import java.util.Objects; import java.util.UUID;  @RestController @RequestMapping("/user") public class UserController {      @PostMapping("/updateAvatar")     public Result