JavaWeb el-upload图片上传SpringBoot保存并且前端使用img src直接访问(基于RuoYi-Vue3)
一、Vue前端
1 | <el-upload |
需要注意的是action
填写后端api路径,同时header
需要填写token不然会被拦截,其余的没有影响可以翻阅文档理解。
二、SpringBoot后端
1 | @RestController |
picDir
填写的是图片保存到哪个文件夹路径,无论你是windows开发环境还是linux生产环境,这个路径都应该是绝对路径。
现在图片保存到了这个路径,那么我们前端img
的src
又如何才能经由后端直接访问图片呢?
第一,需要通过SpringBoot的@Configuration
配置一个映射,如下
1 | @Configuration |
意思是将C:\\Users\\mumu\\Desktop\\images\\
路径映射到/images/
,那么当你访问http://localhost:8080/images/1.png
时其实就是在访问C:\\Users\\mumu\\Desktop\\images\\1.png
第二,需要在若依的com.ruoyi.framework.config.SecurityConfig
的configure
函数中中配置访问权限,将/images/
添加其中,对所有人开放,如下
1 | .antMatchers(HttpMethod.GET, "/", "/*.html", "/**/*.html", "/**/*.css", "/**/*.js", "/profile/**", "/images/**").permitAll() |
最后,在前端,像这样就可以经由后端访问图片啦。
1 | <el-image src="http://localhost:8080/images/1.png" style="width: 200px;height: 200px"></el-image> |
三、延伸
这是多图片上传组件,但其实每张都会和后端交互一次。
如果这个图片墙和文字搭配在一起成为一个图文动态发布页面,那么创建主副数据表,主表保存id
和text
表示id和文字,副表保存master_id
,name
,表示主表id,图片名。
当新建动态时,在前端即刻生成当前时间作为图文动态的唯一标识。
当上传图片时,以唯一标识作为master_id
并以保存的名称作为name
插入副表。
当动态提交时,以唯一标识作为id
并以文本内容作为text
插入主表。
当取消时,以唯一标识为查询条件删除主副表相关数据和图片资源。