vue.js javascript java spring boot 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, "保存成功！！");

}

参考文章