您现在的位置是：网站首页> 编程资料编程资料

Vue图片裁剪功能实现代码_vue.js_

2023-05-24 338人已围观

简介 Vue图片裁剪功能实现代码_vue.js_

一、效果展示：

1、表单的图片上传项：

- 新增时默认一个空白Input框

- 更新时展示以往上传存放的图片，

　　- 点击【查看】浏览完整大小

　　- 点击【删除】清空src地址，重新上传新照片

2、裁剪框页面

- 先选择裁剪的图片

- 右侧展示裁剪区域

- 支持放大缩小，图片旋转

- 点击【上传图片】调用后台上传接口进行上传

二、代码部分

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

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

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

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

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 = "/file/upload", consumes = "multipart/form-data") public RpcResult uploadFile(@RequestParam(value = "rpc") MultipartFile file, @RequestParam(value = "fileName") String fileName, @RequestParam(value = "busType") String busType) {

在uploadImg函数这里，使用FormData对象包装请求参数

注意append方法，要给文件对象指定文件名，必须要入参第三个参数

否则默认名称blob

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

const formData = 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 functio
                
                

                

                                            
上一篇：JS 中的类Public,Private 和 Protected详解_javascript技巧_

                                                                
下一篇：详解如何让页面与 iframe 进行通信_JavaScript_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网