SpringBoot+Vue实现（表单+图片）上传、图片地址保存到数据库。上传图片保存位置自己定义、图片可以在前端回显

前言

本文解答了如何同时上传图片和其他属性给后端、图片上传的请求头设置、数据库中图片存储方式、资源映射方法、本地存储位置、验证拦截处理以及前端回显图片等问题。

实现效果

主要实现将图片链接存入数据库并在前台展示上传图片。

1、功能实现大致思路

• 存数据：前端单独提交图片信息，后端将图片资源映射后返回访问地址，前端将地址存入表单提交给后端。
• 取数据：前端获取包含图片访问路径的信息，进行展示。

2、具体实现过程

前端处理

使用elementui组件和FormData进行文件上传，并设置请求头为 'Content-Type': 'multipart/form-data'。

3、后端处理部分

后端使用Hutool工具库处理文件上传，包括文件名处理、存储和资源地址返回。

4、接口返回给前端的数据

后端返回图片访问地址给前端，前端保存地址并与表单其他数据一同提交。

5、图片资源映射【重点】

通过Java代码进行资源映射，确保前端可以访问到图片资源。如果设置了token验证，需要配置过滤器以放行图片资源。

6、前端图片的回显

实现点击按钮预览对应商品图片的功能，使用弹窗形式展示图片。

关键字回复

提供了一系列数字关键字，用户通过回复相应数字获取不同的学习资料或项目源码。