vue-cropper官网
https://github.com/xyxiao001/vue-cropper
需求:上传图片之前,按照一定比例进行剪裁,剪裁后上传到服务器,控制用户上传图片的尺寸大小以及图片格式
1、组件内引入
import {
VueCropper } from 'vue-cropper'
components: {
VueCropper,
},
2、全局引入
在main.js中配置如下代码
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)
3.组件
组件内代码以及方法以及css 在vue-croppper源码地址直接ACV就行.
4.boot的controller(后端)
@RequestMapping("/upload")
public ResultData upload(@RequestParam("file") MultipartFile file) {
return userService.upload(file);
}
5.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("上传图片失败");
}
}
4.5让后端看就行
项目具体的样式以及按钮触发什么需求的,自己按需调整,点个赞谢谢