这篇文章主要为大家详细介绍了vue-cropper组件实现图片切割上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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文件
<label class="btn" for="uploads">选择图片</label><div style="margin-left:20px"> <div class="show-preview"> <div class="preview" style="width: 40px;height: 40px"> </div></div></div><div class="cut"> </div><div class="dialog-footer"> 取 消确 定</div> @import "./userLogo.less";
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: 1<a>本文来源gao($daima.com搞@代@#码(网</a>4px; 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 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-cropper组件实现图片切割上传的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue-cropper组件实现图片切割上传
转载请注明原文链接：vue-cropper组件实现图片切割上传
