vue-cropper组件实现图片切割上传
更新时间:2021年5月28日 10:00 点击:1946
本文实例为大家分享了vue-cropper组件实现图片切割上传的具体代码,供大家参考,具体内容如下
这几日,等来了些空闲,用vue和spring boot实践一次头像上传,因此记下了,望将来的开发有所帮助。
vue-cropper在vue中的引入
1、组件内引入
import { VueCropper } from 'vue-cropper' components: { VueCropper, },
2、全局引入
在main.js中配置如下代码
import VueCropper from 'vue-cropper' Vue.use(VueCropper)
3、使用示例
vue文件
<template> <el-dialog title="编辑头像" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body > <label class="btn" for="uploads">选择图片</label> <input type="file" id="uploads" :value="imgFile" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)" > <div style="margin-left:20px;"> <div class="show-preview" :style="{'overflow': 'hidden', 'margin': '5px'}"> <div :style="previews.div" class="preview" style="width: 40px;height: 40px;"> <img :src="previews.url" :style="previews.img"> </div> </div> </div> <div class="cut"> <vueCropper ref="cropper" :img="option.img" :outputSize="option.size" :outputType="option.outputType" :info="true" :full="option.full" :canMove="option.canMove" :canMoveBox="option.canMoveBox" :original="option.original" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :fixedBox="option.fixedBox" @realTime="realTime" @imgLoad="imgLoad" ></vueCropper> </div> <div slot="footer" class="dialog-footer"> <el-button @click="dialogFormVisible = false" size="small">取 消</el-button> <el-button type="primary" @click="finish('blob')" size="small">确 定</el-button> </div> </el-dialog> </template> <script> import { VueCropper } from "vue-cropper"; export default { components: { VueCropper }, data() { return { previews: {}, model: false, modelSrc: "", fileName: "", imgFile: "", dialogFormVisible: false, option: { img: "", outputSize: 1, //剪切后的图片质量(0.1-1) full: false, //输出原图比例截图 props名full outputType: "png", canMove: true, original: false, canMoveBox: true, autoCrop: true, autoCropWidth: 40, autoCropHeight: 40, fixedBox: true } }; }, methods: { //上传图片(点击上传按钮) finish(type) { let selft = this; let formData = new FormData(); // 输出 if (type === "blob") { selft.$refs.cropper.getCropBlob(data => { let img = window.URL.createObjectURL(data); selft.model = true; selft.modelSrc = img; formData.append("file", data, selft.fileName); selft.$api.writer.userUpload(formData, r => { if (r.code) { selft.$alert.error(r.msg); } else { selft.$message({ message: r.data.msg, type: "success" }); selft.$store.state.userInfo = r.data.data; selft.dialogFormVisible = false; } }); }); } else { this.$refs.cropper.getCropData(data => {}); } }, //选择本地图片 uploadImg(e, num) { console.log("uploadImg"); var selft = this; //上传图片 var file = e.target.files[0]; selft.fileName = file.name; if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) { alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种"); return false; } var reader = new FileReader(); reader.onload = e => { let data; if (typeof e.target.result === "object") { // 把Array Buffer转化为blob 如果是base64不需要 data = window.URL.createObjectURL(new Blob([e.target.result])); } else { data = e.target.result; } if (num === 1) { selft.option.img = data; } else if (num === 2) { selft.example2.img = data; } }; // 转化为base64 // reader.readAsDataURL(file) // 转化为blob reader.readAsArrayBuffer(file); }, show() { this.dialogFormVisible = true; }, // 实时预览函数 realTime(data) { console.log("realTime"); this.previews = data; }, imgLoad(msg) { console.log("imgLoad"); console.log(msg); } } }; </script> <style lang="less"> @import "./userLogo.less"; </style>
less文件
.cut { width: 300px; height: 300px; margin: 0px auto; } .hh { .el-dialog__header { padding: 0px; line-height: 2; background-color: #f3f3f3; height: 31px; border-bottom: 1px solid #e5e5e5; background: #f3f3f3; border-top-left-radius: 5px; border-top-right-radius: 5px; } .el-dialog__title { float: left; height: 31px; color: #4c4c4c; font-size: 12px; line-height: 31px; overflow: hidden; margin: 0; padding-left: 10px; font-weight: bold; text-shadow: 0 1px 1px #fff; } .el-dialog__headerbtn { position: absolute; top: 8px; right: 10px; padding: 0; background: 0 0; border: none; outline: 0; cursor: pointer; font-size: 16px; } } .btn { display: inline-block; line-height: 1; white-space: nowrap; cursor: pointer; background: #fff; border: 1px solid #c0ccda; color: #1f2d3d; text-align: center; box-sizing: border-box; outline: none; //margin: 20px 10px 0px 0px; padding: 9px 15px; font-size: 14px; border-radius: 4px; color: #fff; background-color: #50bfff; border-color: #50bfff; transition: all 0.2s ease; text-decoration: none; user-select: none; } .show-preview { flex: 1; -webkit-flex: 1; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; .preview { overflow: hidden; border-radius: 50%; border: 1px solid #cccccc; background: #cccccc; } }
发送请求的时候配置axios的Content-Type
// http request 拦截器 axios.interceptors.request.use( config => {debugger let token = sessionStorage.getItem('token') if (token) { config.headers.Authorization = token; } if (config && config.url && config.url.indexOf('upload') > 0) { config.headers['Content-Type'] = 'multipart/form-data' } return config }, err => { return Promise.reject(err) } )
boot的controller
@RequestMapping("/upload") public ResultData upload(@RequestParam("file") MultipartFile file) { return userService.upload(file); }
boot的service
@Override public ResultData upload(MultipartFile file) { if (!file.isEmpty()) { StringBuffer requestURL = sessionUtil.getRequestURL(); int end = requestURL.indexOf("/user/upload"); String basePath = requestURL.substring(0, end); String savePath = basePath + "/static/img/logo/"; // 获取文件名称,包含后缀 String fileName = file.getOriginalFilename(); String saveDbPath = savePath + fileName; // 存放在这个路径下:该路径是该工程目录下的static文件下:(注:该文件可能需要自己创建) // 放在static下的原因是,存放的是静态文件资源,即通过浏览器输入本地服务器地址,加文件名时是可以访问到的 String path = ClassUtils.getDefaultClassLoader().getResource("").getPath() + "static/img/logo/"; // 该方法是对文件写入的封装,在util类中,导入该包即可使用,后面会给出方法 try { FileUtil.fileupload(file.getBytes(), path, fileName); // 接着创建对应的实体类,将以下路径进行添加,然后通过数据库操作方法写入 User user = sessionUtil.getSessionUser(); user.setLogo(saveDbPath); User whereUser = new User(); whereUser.setId(user.getId()); ConfigHelper.upate(user, "user", whereUser); Map<String, Object> map = new HashMap<>(); map.put("msg", "头像修改成功"); map.put("data", user); return ResultData.ok(map); } catch (IOException e) { log.error("图片上传==》" + e.getMessage()); e.printStackTrace(); return ResultData.failed(e.getMessage()); } catch (Exception e) { log.error("图片上次==》" + e.getMessage()); e.printStackTrace(); return ResultData.failed(e.getMessage()); } } else { return ResultData.failed("上传图片失败"); } }
结束
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30- 本文章来人大家介绍一个php文件上传类的使用方法,期望此实例对各位php入门者会有不小帮助哦。 简介 Class.upload.php是用于管理上传文件的php文件上传类, 它可以帮...2016-11-25
vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25