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