SpringBoot项目前端Vue访问后端(图片静态资源) 配置
静态资源配置
@Configuration
public class WebMvcConfig extends WebMvcConfigurationSupport {
@Value("${file.save-path}")
private String fileSavePath;
@Override
protected void addResourceHandlers(ResourceHandlerRegistry registry) {
//映射本地文件夹
registry.addResourceHandler("/images/**").addResourceLocations("file:" + fileSavePath);
super.addResourceHandlers(registry);
}
}
application.yml
file:
save-path: D:\qr_code_duct\qr_code_back\images\
详细说明
由于要展示的图片可能比较大,从后端数据库中获取base64编码明显不可能(base64大部分适用于KB级别的),数据库正常来说也只存放图片的地址,而不是图片的内容。
CREATE TABLE `card_record_image` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`card_record_id` int(11) DEFAULT NULL,
`create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
`operator_id` int(11) DEFAULT NULL,
`image_url` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`),
KEY `card_record_id` (`card_record_id`),
CONSTRAINT `card_record_image_ibfk_1` FOREIGN KEY (`card_record_id`) REFERENCES `card_record` (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=32 DEFAULT CHARSET=utf8mb4;
public RespondDto saveCardRecord(RequestData requestData) {
// 解析前端传递的数据, 创建CardRecord对象并保存到数据库
CardRecord cardRecord = new CardRecord();
cardRecord.setProductId(requestData.getProductId());
cardRecord.setCurrentLocation(requestData.getCurrentLocation());
cardRecord.setDescription(requestData.getDesc());
cardRecord.setCreateTime(new Date());
cardRecordMapper.insert(cardRecord);
// 保存卡记录图片
List imageList = requestData.getImageList();
List imageUrlList = new ArrayList();
for (String base64Image : imageList) {
// 移除可能的前缀信息(如"data:image/jpeg;base64,"),只保留base64编码部分
String base64Data = base64Image.replaceAll("data:image/.*;base64,", "");
// 从 base64 解码成二进制数据
byte[] imageBytes = Base64.getDecoder().decode(base64Data);
// 生成文件名,这里可以根据需要生成唯一的文件名
String fileName = "image_" + UUID.randomUUID() + ".png";
// 构建文件保存路径
// String fileSavePath = "D:" + File.separator + "qr_code_duct" + File.separator + "qr_code_back" + File.separator +"images" +File.separator +fileName;
String fileSavePath = fileProperties.getSavePath() + fileName;
try (FileOutputStream fos = new FileOutputStream(fileSavePath)) {
fos.write(imageBytes);
// 替换为实际的域名和路径
imageUrlList.add("/images/" + fileName);
} catch (IOException e) {
throw new RuntimeException(e);
}
// 保存图片信息到数据库
CardRecordImage cardRecordImage = new CardRecordImage();
cardRecordImage.setCardRecordId(Math.toIntExact(cardRecord.getId()));
// 替换为实际的域名和路径
cardRecordImage.setImageUrl("/images/" + fileName);
cardRecordImage.setCreateTime(new Date());
cardRecordImageMapper.insert(cardRecordImage);
}
return new RespondDto(ResultCode.OK, "保存成功!!");
}
返回
.return-button-container {
position: absolute;
top: 16px;
right: 16px;
}
注意事项
1、D:\qr_code_duct\qr_code_back\images\ 这个路径一定要是项目下的路径,不然静态资源配置将会找不到。
2、D:\qr_code_duct\qr_code_back\images\这个路径最后结束一定要加\ ,不然资源也会找不到。