基于SpringBoot的图片上传组件,实现图片裁剪、Thumbnailator压缩的功能

本周三、周四、周五封装了一个基于SpringBoot的图片上传组件。功能流程如下:

1、前台页面有一个“选择文件”按钮,点击选择一张图片后,在前台界面进行显示。

2、双击显示出来的图片,前台使用cropper图片裁剪插件,将裁剪信息(裁剪起始点坐标 x,y,裁剪宽度width,裁剪高度height)以及上传的图片文件,传给后台。

3、后台对图片进行裁剪,再将裁剪后的图片进行压缩,把原图路径、裁剪后图片路径、压缩后图片路径、base64编码存入数据库。(同时后台将这三种图片保存到本地 D:/images/ 路径下)

4、后台将压缩后的图片路径传给前台。

5、前台接收到这个路径,在页面上进行显示。由于此时显示的是压缩的图片,如果用户想看原图(裁剪后图片的原图),点击该图片,携带这个图片路径请求后台接口。

6、后台接收到压缩图片路径,select数据库,找到裁剪后图片路径,返回给前台。

7、前台接收到这个原图片路径,在页面进行显示。

一、SpringBoot自定义静态资源映射

将一些动态维护的文件,放在服务器磁盘的某个目录下(项目目录之外),并且通过SpringBoot服务进行访问。

实现类继承WebMvcConfigurerAdapter并重写方法addResourceHandlers,将磁盘上文件存放的绝对路径映射,就可以通过访问SpringBoot服务来访问文件了。

@Configuration
public class WebAppConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/myImages/**").addResourceLocations("file:D:/images/");
        super.addResourceHandlers(registry);
    }
}
这样就将D盘上的images目录映射到myImages路径下,这个 myImages 是随意的一个命名。
假如在D盘images目录下有一个test.jpg图片,那么通过访问 http://localhost:8080/myImages/test.jpg  就可以访问到该图片了。

二、Java实现图片裁剪、使用Thumbnailator工具对图片进行压缩。

裁剪功能需要前台给后台传裁剪数据:x、y、width、

  • 3
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,我们需要在前端使用 antdv 组件实现图片上传。可以使用 Upload 组件实现。具体代码如下: ``` <template> <div> <a-upload :action="'http://localhost:8080/api/upload'" :headers="{Authorization: 'Bearer ' + token}" :before-upload="beforeUpload" :on-success="onUploadSuccess" :show-upload-list="false" > <a-button icon="upload">Click to Upload</a-button> </a-upload> </div> </template> <script> export default { data() { return { token: 'your_token_here' } }, methods: { beforeUpload(file) { const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; if (!isJpgOrPng) { this.$message.error('You can only upload JPG/PNG file!'); return false; } const isLt2M = file.size / 1024 / 1024 < 2; if (!isLt2M) { this.$message.error('Image must smaller than 2MB!'); return false; } return true; }, onUploadSuccess(response) { this.$message.success('Upload successfully!'); } } } </script> ``` 在这个代码中,我们通过设置 Upload 组件的属性实现了以下功能: - 设置上传的地址为 `http://localhost:8080/api/upload`,这是后端提供的图片上传接口; - 设置请求头中的 `Authorization` 属性为我们的 token,这是为了验证用户的身份; - 设置上传前的验证函数 `beforeUpload`,用于检查上传的文件类型和大小是否符合要求; - 设置上传成功后的回调函数 `onUploadSuccess`,用于在页面上提示用户上传成功。 接下来,我们需要在后端使用 SpringBoot 来接收前端上传的图片。具体代码如下: ```java @RestController @RequestMapping("/api") public class UploadController { @PostMapping("/upload") public ResponseEntity<?> uploadFile(@RequestParam("file") MultipartFile file) { try { // 保存上传的文件到本地磁盘或云存储 // ... return ResponseEntity.ok().body("Upload successfully!"); } catch (Exception e) { return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Failed to upload file."); } } } ``` 在这个代码中,我们通过 `@PostMapping("/upload")` 注解来指定接收前端上传的图片请求。`@RequestParam("file") MultipartFile file` 表示接收一个名为 `file` 的文件参数。在接收到图片后,我们可以将其保存到本地磁盘或云存储中,并返回一个上传成功的信息给前端。如果上传过程中出现了异常,我们会返回一个 500 错误给前端。 以上就是使用 antdv 组件SpringBoot实现图片上传的基本流程。当然,具体的实现方式还会因为不同的业务需求而有所差异。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值