vue-cli项目上传图片裁剪

vue-cropper官网

https://github.com/xyxiao001/vue-cropper

vue-croppper源码地址

需求：上传图片之前，按照一定比例进行剪裁，剪裁后上传到服务器,控制用户上传图片的尺寸大小以及图片格式

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让后端看就行

项目具体的样式以及按钮触发什么需求的,自己按需调整,点个赞谢谢