vue3:十六、个人中心-个人信息-头像裁剪、功能

Vue3个人中心头像裁剪与功能实现

原创

已于 2025-06-26 20:50:37 修改 · 1k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#arcgis

于 2025-06-26 18:10:46 首次发布

一、实现效果

1、图片裁剪

点击头像可进行图片上传，上传前可对头像进行简单的裁剪处理

2、表单提交完成效果

提交表单后可修改基础信息和头像信息

二、初始搭建

1、写入上传图片的接口

(1)新建接口

新建接口/upload/file，写入参数file类型的file

(2)新建期望

上传成功后，返回新的图片

2、创建裁剪组件页面

创建裁剪组件src/components

三、图片裁剪

1、组件安装

使用vue-cropper进行裁剪

(1)官网参考

gitee

vue-cropper: A simple picture clipping plugin for vue

github

GitHub - xyxiao001/vue-cropper: A simple picture clipping plugin for vue

gitcode

项目首页 - vue-cropper:A simple picture clipping plugin for vue - GitCode

(2)安装说明

(3)进行安装

这里使用npm进行安装

使用兼容vue3的

npm install vue-cropper@next

使用终端

(4)成功检测

在package-lock.json文件中可以看到存在vue-cropper，表明安装成功

(5)常用文档参数说明

直接复制的官网数据

名称	功能	默认值	可选值
img	裁剪图片的地址	空	`url 地址`, `base64`, `blob`
outputSize	裁剪生成图片的质量	`1`	0.1 ~ 1
outputType	裁剪生成图片的格式	jpg (jpg 需要传入jpeg)	`jpeg`, `png`, `webp`
info	裁剪框的大小信息	`true`	`true`, `false`
canScale	图片是否允许滚轮缩放	`true`	`true`, `false`
autoCrop	是否默认生成截图框	`false`	`true`, `false`
autoCropWidth	默认生成截图框宽度	容器的 80%	0 ~ max
autoCropHeight	默认生成截图框高度	容器的 80%	0 ~ max
fixed	是否开启截图框宽高固定比例	`false`	`true`, `false`
fixedNumber	截图框的宽高比例, 开启`fixed`生效	`[1, 1]`	`[ 宽度 , 高度 ]`
full	是否输出原图比例的截图	`false`	`true`, `false`
fixedBox	固定截图框大小	不允许改变	`false`
canMove	上传图片是否可以移动	`true`	`true`, `false`
canMoveBox	截图框能否拖动	`true`	`true`, `false`
original	上传图片按照原始比例渲染	`false`	`true`, `false`
centerBox	截图框是否被限制在图片里面	`false`	`true`, `false`
high	是否按照设备的dpr 输出等比例图片	`true`	`true`, `false`
infoTrue	true 为展示真实输出图片宽高 `false` 展示看到的截图框宽高	false	`true`, `false`
maxImgSize	限制图片最大宽度和高度	`2000`	0 ~ max
enlarge	图片根据截图框输出比例倍数	`1`	0 ~ max(建议不要太大不然会卡死的呢)
mode	图片默认渲染方式	`contain`	`contain` , `cover`, `100px`, `100%` auto
limitMinSize	裁剪框限制最小区域	10	Number, Array, String
fillColor	导出时背景颜色填充	空	`#ffffff`, `white`

2、头像上传

在图片裁剪中要首先加入上传头像的功能

(1)创建组件页面

创建裁剪的组件页面src/components/ImgCropper.vue

(2)官网参考

(3)裁剪组件视图层

在视图层中直接写入头像上传的组件

accept：规定允许默认上传的文件类型
on-change：文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
auto-upload：是否自动上传文件
limit：限制文件上传数量
show-file-list：是否显示已上传文件列表
file-list：默认上传文件

添加头像框img

src：给出默认头像路径imageUrl
width="80" height="80"：设置固定的宽高

如果没有传递的图片路径

展示官方提供的加号上传

<el-upload accept=".jpeg,.png,.jpg" :on-change="onImgChange" :auto-upload="false" :limit="1" class="avatar-uploader"
    :show-file-list="false" :file-list="fileList">
    <img v-if="imageUrl" :src="imageUrl" class="avatar" width="80" height="80" />
    <el-icon v-else class="avatar-uploader-icon">
        <Plus />
    </el-icon>
</el-upload>