Vue图片裁剪功能实现代码 Vue图片裁剪功能实现代码

一、效果展示：

1、表单的图片上传项：
2、裁剪框页面

二、代码部分

1、首先安装Vue-Cropper，基于此组件的基础上开发的裁剪页面
2、裁剪弹窗的组件编写：
3、【图片上传表单项】组件编写

一、效果展示：
1、表单的图片上传项：
- 新增时默认一个空白Input框
- 更新时展示以往上传存放的图片，
- 点击【查看】浏览完整大小
- 点击【删除】清空src地址，重新上传新照片

文章图片

文章图片

2、裁剪框页面
- 先选择裁剪的图片
- 右侧展示裁剪区域
- 支持放大缩小，图片旋转
- 点击【上传图片】调用后台上传接口进行上传

文章图片

文章图片

二、代码部分
1、首先安装Vue-Cropper，基于此组件的基础上开发的裁剪页面

npm install vue-cropper"vue-cropper": "^0.5.8"

2、裁剪弹窗的组件编写：

.cropper-content {display: flex; display: -webkit-flex; justify-content: flex-end; .cropper-box {flex: 1; width: 100%; .cropper {width: auto; height: 300px; }} .show-preview {flex: 1; -webkit-flex: 1; display: flex; display: -webkit-flex; justify-content: center; .preview {overflow: hidden; border: 1px solid #67c23a; background: #cccccc; }}}.footer-btn {margin-top: 30px; display: flex; display: -webkit-flex; justify-content: flex-end; .scope-btn {display: flex; display: -webkit-flex; justify-content: space-between; padding-right: 10px; }.upload-btn {flex: 1; -webkit-flex: 1; display: flex; display: -webkit-flex; justify-content: center; }.btn {outline: none; display: inline-block; line-height: 1; white-space: nowrap; cursor: pointer; -webkit-appearance: none; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; outline: 0; -webkit-transition: 0.1s; transition: 0.1s; font-weight: 500; padding: 8px 15px; font-size: 12px; border-radius: 3px; color: #fff; background-color: #409eff; border-color: #409eff; margin-right: 10px; }}

需要更改成自己的上传接口：

import { uploadFile } from '@/api/smrz/setting'

后台接口参数如下，要求表单方式上传

/*** 上传附件** @param file文件流(注意带文件后缀,统一使用.jpg结尾)* @param fileName 文件名称(唯一性)* @param busType业务类型(具体值参考ApiConstants类中FILE_开头常量说明)* @author wangkun* @createTime 2022/7/19 17:18*/ @PostMapping(value = "https://www.it610.com/file/upload", consumes = "multipart/form-data") public RpcResult uploadFile(@RequestParam(value = "https://www.it610.com/article/rpc") MultipartFile file, @RequestParam(value = "https://www.it610.com/article/fileName") String fileName, @RequestParam(value = "https://www.it610.com/article/busType") String busType) {

在uploadImg函数这里，使用FormData对象包装请求参数
注意append方法，要给文件对象指定文件名，必须要入参第三个参数
否则默认名称blob

文章图片

按实际接口对应调整参数即可

const formData = https://www.it610.com/article/new FormData() _this.randomFileName = this.createNewFileName() // 给blob对象的filename属性赋值文件名formData.append('rpc', data, _this.randomFileName)// 给参数赋值文件名formData.append('fileName', _this.randomFileName)formData.append('busType', _this.busType) uploadFile(formData)

其它自定义参数，通过Props属性传入此组件

props: {autoCropWidth: { // 默认生成截图框宽度type: Number,default: 410},autoCropHeight: { // 默认生成截图框高度type: Number,default: 150},busType: {type: String,default: 'advertPic'}},

文件名的生成方法，就是当前时间按单位数值排序
实际使用根据业务实际情况改写

export function regularFileName() {const now = new Date()const year = now.getFullYear()const month = digitFix(now.getMonth() + 1)const dayOfMonth = digitFix(now.getDate())const hour = digitFix(now.getHours())const minute = digitFix(now.getMinutes())const second = digitFix(now.getSeconds())const millSecond = now.getMilliseconds()return `${year}${month}${dayOfMonth}${hour}${minute}${second}${millSecond}`}const fileName = `${regularFileName()}

3、【图片上传表单项】组件编写

.upload-list-cover {position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0 40px; align-items: center; background: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 1s; }.cover_icon {font-size: 30px; }.upload-btn {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid #cccccc; border-radius: 5px; overflow: hidden; box-shadow: 0 0 1px #cccccc; }.upload-btn:hover {border: 1px solid #69b7ed; }.upload-btn i {margin: 5px; } .img_div img {width: 200px !important; height: 100px !important; /*margin: 20px 400px 0 400px; position: relative; width: 531px; height: 354px; */}.mask {position: absolute; top: 0; left: 0; width: 200px; height: 100px; background: rgba(101, 101, 101, 0.6); color: #ffffff; opacity: 0; }.mask h3 {text-align: center; line-height: 60px; } .img_div a:hover .mask {opacity: 0.8; }

表单项组件需要引入
1、裁剪组件
2、图片下载接口

import CropperImage from '@/components/CropperImage'import { commonsDownloadAPI } from '@/api/smrz/setting'

3、表单项设置了自定义校验

var imageUrl2 = (rule, value, callback) => {if (!this.isSignFlag) {return callback()}if (!value) {return callback(new Error('请输上传图片'))}return callback()}

就是检查src有没有地址或者base64资源，校验触发的效果：

文章图片

4、图片上传后的回调处理：
上传成功后，回到表单页需要立即回显之前上传的图片
所以需要调用图片下载接口来获取刚刚上传的资源，
在这个回调方法中实现，因为下载接口提供的资源不是图片地址，而是返回Base64编码
这里我写的是base64编码资源的回显处理
实际使用根据业务实际情况改写

// 图片上传成功后async handleUploadSuccess(data) {// this.formValidate.mainImage = data.url // 图片回显const { data: res2, code } = await commonsDownloadAPI({fileName: data.fileName,busType: 'advertPic'}) const imgBase64 =code !== 200? '-1' : `data:image/jpeg; base64,${res2.data}`this.formValidate.mainImage = imgBase64 /* switch (data.name) {case 'flagImg':this.formValidate.mainImage = data.urlconsole.log('最终输出' + data.name)console.log('最终输出2' + this.formValidate)break}*/this.cropperModel = falsethis.$emit('uploadSuccess', data)},

4、业务功能引用
引入表单项

import Tailoring from '@/components/Tailoring'

声明组件，并注入参数

- url是一开始加载组件需要回显的图片资源地址
【Vue图片裁剪功能实现代码】- isSignFlag变量用来辅助自定义校验的，为false时直接放行校验，所以默认写死true
- bus-type是自定义的业务参数
- auto-crop的宽高用来配置裁剪的宽高，预览大小和裁剪大小合并使用这两个参数
上传成功的回调，uploadSuccess，可以在组件自定义需要的参数
这里是以图片名称作为记录主键，所以要传入这个文件名
实际使用根据业务实际情况改写

async uploadSuccess(res) {console.log(`上传结果 res -> ${JSON.stringify(res)}`)const fileName = res.fileNamethis.newId = fileName.substring(0, fileName.lastIndexOf('.'))},

校验值，应该是返回校验后的src值，但我这里没用上，所以不执行任何逻辑