JavaWeb el-upload图片上传SpringBoot保存并且前端使用img src直接访问(基于RuoYi-Vue3)

JavaWeb el-upload图片上传SpringBoot保存并且前端使用img src直接访问(基于RuoYi-Vue3)

一、Vue前端

language-html
1
2
3
4
5
6
7
8
9
10
11
12
<el-upload
v-model:file-list="createParams.fileList"
action="http://localhost:8080/DataMgt/uploadPic"
:headers="{ Authorization: 'Bearer ' + getToken() }"
list-type="picture-card"
:on-success="handleSuccess"
:before-upload="handlePicBeforeUpload"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
>
<el-icon><Plus /></el-icon>
</el-upload>

需要注意的是action填写后端api路径,同时header需要填写token不然会被拦截,其余的没有影响可以翻阅文档理解。

二、SpringBoot后端

language-java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@RestController
@RequestMapping("/DataMgt")
public class Home extends BaseController {

private static String picDir = "C:\\Users\\mumu\\Desktop\\images\\";

@RequestMapping("/uploadPic")
public AjaxResult uploadPic(MultipartFile file) throws IOException {

String filePath = picDir+ UUID.randomUUID().toString() + file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf('.'));
File saveF = new File(filePath);
logger.info("save pic:"+filePath);
file.transferTo(saveF);
return success(filePath);
}
}

picDir填写的是图片保存到哪个文件夹路径,无论你是windows开发环境还是linux生产环境,这个路径都应该是绝对路径。
现在图片保存到了这个路径,那么我们前端imgsrc又如何才能经由后端直接访问图片呢?

第一,需要通过SpringBoot的@Configuration配置一个映射,如下

language-java
1
2
3
4
5
6
7
8
9
10
@Configuration
public class StaticConfig implements WebMvcConfigurer {

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {

registry.addResourceHandler("/images/**")
.addResourceLocations("file:C:\\Users\\mumu\\Desktop\\images\\");
}
}

意思是将C:\\Users\\mumu\\Desktop\\images\\路径映射到/images/,那么当你访问http://localhost:8080/images/1.png时其实就是在访问C:\\Users\\mumu\\Desktop\\images\\1.png

第二,需要在若依的com.ruoyi.framework.config.SecurityConfigconfigure函数中中配置访问权限,将/images/添加其中,对所有人开放,如下

language-java
1
.antMatchers(HttpMethod.GET, "/", "/*.html", "/**/*.html", "/**/*.css", "/**/*.js", "/profile/**", "/images/**").permitAll()

最后,在前端,像这样就可以经由后端访问图片啦。

language-html
1
<el-image src="http://localhost:8080/images/1.png" style="width: 200px;height: 200px"></el-image>

三、延伸

这是多图片上传组件,但其实每张都会和后端交互一次。

如果这个图片墙和文字搭配在一起成为一个图文动态发布页面,那么创建主副数据表,主表保存idtext表示id和文字,副表保存master_idname,表示主表id,图片名。
当新建动态时,在前端即刻生成当前时间作为图文动态的唯一标识。
当上传图片时,以唯一标识作为master_id并以保存的名称作为name插入副表。
当动态提交时,以唯一标识作为id并以文本内容作为text插入主表。
当取消时,以唯一标识为查询条件删除主副表相关数据和图片资源。

JavaWeb Springboot后端接收前端Date变量

JavaWeb Springboot后端接收前端Date变量

如果前端传输的日期符合ISO 8601格式,那么后端用@PostMapping + @RequestBody那么springboot就会自动解析。

如果传输的日期格式不符合ISO 8601格式或者传输用的是Get方法,那么在接收传输的实体类中加上@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss"),这里面的pattern对应传来的日期格式。

language-html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
ISO 8601是一种国际标准的日期和时间表示方式。这种格式的主要特点包括:

- 时间日期按照年月日时分秒的顺序排列,大时间单位在小时间单位之前。
- 每个时间单位的位数固定,不足时于左补0。
- 提供两种方法来表示时间:其一为只有数字的基础格式;其二为添加分隔符的扩展格式,让人能更容易阅读。

具体来说,ISO 8601的日期和时间表示方式的格式为`YYYY-MM-DDTHH:mm:ss.sssZ`,其中:

- `YYYY`代表四位数年份。
- `MM`代表月份。
- `DD`代表天数。
- `T`作为日期和时间的分隔符。
- `HH`代表小时。
- `mm`代表分钟。
- `ss.sss`代表秒和毫秒。
- `Z`代表的是时区。

例如,

"2023年11月15日06时16分50秒"可以表示为"2023-11-15T06:16:50"。
"2023-11-15"是ISO 8601日期格式的一个子集。在ISO 8601中,日期可以表示为"YYYY-MM-DD"的格式。因此,"2023-11-15"是符合ISO 8601日期格式的。