本文实例为大家分享了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文件
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.getrequest; 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); mapmap = 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("上传图片失败"); } }
结束
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。