从零搭建微服务项目Pro（第3-1章——本地/OSS图片文件存取）

前言：

在小型demo项目中，一般将图片音频等字节流文件存放本地数据库，但企业级项目中，由于数据量容量有限，需要借助OSS来管理大规模文件。

OSS（对象存储服务，Object Storage Service）是一种用于存储和管理非结构化数据的云存储服务，适合存储图片、视频、文档等大规模数据。它具有高扩展性、高可靠性、低成本和易用性等特点，广泛应用于数据备份、多媒体存储、大数据分析和静态网站托管等场景。使用OSS的基本流程包括：首先在云服务提供商平台创建存储空间（Bucket），然后通过API、SDK或管理控制台上传和管理文件，设置访问权限以确保数据安全，最后可以通过生成的（临时）URL访问存储的文件。

本章在讲解如何使用mysql存储字节型数据后，示范如何使用阿里云OSS服务完成文件的存取，并提供对应前端代码而非postman调用接口。

本章项目源码如下：（注意将application中内容换成3.6部分内容）

wlf728050719/SpringCloudPro3-1https://github.com/wlf728050719/SpringCloudPro3-1 以及本专栏会持续更新微服务项目，每一章的项目都会基于前一章项目进行功能的完善，欢迎小伙伴们关注！同时如果只是对单章感兴趣也不用从头看，只需下载前一章项目即可，每一章都会有前置项目准备部分，跟着操作就能实现上一章的最终效果，当然如果是一直跟着做可以直接跳过这一部分。专栏目录链接如下，其中Base篇为基础微服务搭建，Pro篇为复杂模块实现。

从零搭建微服务项目（全）-CSDN博客https://blog.csdn.net/wlf2030/article/details/145799620

一、基本项目创建

1.创建Spring Boot项目，选择不添加依赖和插件

2.删除不必要目录和文件，创建application.yml

3.替换pom内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.3.9.RELEASE</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>cn.bit</groupId><artifactId>Pro3_1</artifactId><version>0.0.1-SNAPSHOT</version><name>Pro3_1</name><description>Pro3_1</description><dependencies><!-- Web依赖 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId><version>2.3.9.RELEASE</version></dependency><!-- Mysql驱动 --><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.47</version></dependency><!--Mybatis--><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.7</version></dependency><!-- Lombok --><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><scope>provided</scope><version>1.18.36</version><optional>true</optional></dependency><!-- test --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>

4.创建存放图片的数据库和表

表sql如下:

create table tb_img
(id    int auto_incrementprimary key,name  varchar(100) not null,image longblob     not null
);

yml内容如下：（替换为自己的数据库）

server:port: 1234
spring:datasource:url: jdbc:mysql://localhost:3306/db_image?useSSL=falseusername: rootpassword: 15947035212driver-class-name: com.mysql.jdbc.Driverapplication:name: image-servicemybatis-plus:mapper-locations: classpath:mapper/*Mapper.xmltype-aliases-package: cn.bit.pro3_1.mapper

5.配置数据源

二、本地数据库存取文件

1.连接成功后选择Mybatis X Generator自动生成实体类等对应代码。

2.最后生成目录如下：

3.生成mapper上加@Mapper

4.service接口加两个方法

package cn.bit.pro3_1.service;import cn.bit.pro3_1.entity.Image;
import com.baomidou.mybatisplus.extension.service.IService;/**
* @author wlf
* @description 针对表【tb_img】的数据库操作Service
* @createDate 2025-03-10 16:39:32
*/
public interface ImageService extends IService<Image> {int insertImage(Image image);Image selectImageById(int id);
}

5.对应实现

package cn.bit.pro3_1.service.impl;import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import cn.bit.pro3_1.entity.Image;
import cn.bit.pro3_1.service.ImageService;
import cn.bit.pro3_1.mapper.ImageMapper;
import org.springframework.stereotype.Service;/**
* @author wlf
* @description 针对表【tb_img】的数据库操作Service实现
* @createDate 2025-03-10 16:39:32
*/
@Service
public class ImageServiceImpl extends ServiceImpl<ImageMapper, Image>implements ImageService{@Overridepublic int insertImage(Image image) {return baseMapper.insert(image);}@Overridepublic Image selectImageById(int id) {return baseMapper.selectById(id);}
}

6.创建controller包以及ImageController @CrossOrigin必须，否则出现跨域问题导致尽管业务没问题，但响应被浏览器视为错误。

package cn.bit.pro3_1.controller;import cn.bit.pro3_1.entity.Image;
import cn.bit.pro3_1.service.ImageService;
import lombok.AllArgsConstructor;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;import java.io.IOException;@RestController
@RequestMapping("/image")
@AllArgsConstructor
@CrossOrigin(origins = "*")
public class ImageController {private final ImageService imageService;/*** 上传图片并存储到数据库** @param file 前端上传的图片文件* @return 图片的 ID*/@PostMapping("/upload")public ResponseEntity<Integer> uploadImage(@RequestParam("file") MultipartFile file) throws IOException {// 将 MultipartFile 转换为 byte[]byte[] imageData = file.getBytes();// 获取文件名String fileName = file.getOriginalFilename();// 创建 Image 对象Image image = new Image();image.setName(fileName);image.setImage(imageData);// 调用 Service 层方法存储图片imageService.insertImage(image);// 返回图片的 IDreturn ResponseEntity.ok(image.getId());}/*** 根据图片 ID 获取图片并返回给前端** @param id 图片的 ID* @return 图片的字节数据*/@GetMapping(value = "/{id}", produces = MediaType.IMAGE_JPEG_VALUE)public ResponseEntity<byte[]> getImage(@PathVariable int id) {// 调用 Service 层方法获取图片Image image = imageService.selectImageById(id);if (image == null) {return ResponseEntity.notFound().build();}// 返回图片的字节数据return ResponseEntity.ok(image.getImage());}
}

7.前端html如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Image Upload and Display</title>
</head>
<body>
<h1>Upload Image to Local Server</h1>
<form id="uploadForm"><input type="file" id="fileInput" name="file" accept="image/*" required><button type="submit">Upload to Local</button>
</form><h1>Upload Image to AliYun OSS</h1>
<form id="aliyunUploadForm"><input type="file" id="aliyunFileInput" name="file" accept="image/*" required><button type="submit">Upload to AliYun OSS</button>
</form><h1>Download Image from AliYun OSS</h1>
<form id="aliyunDownloadForm"><input type="text" id="fileNameInput" placeholder="Enter file name" required><button type="submit">Download from AliYun OSS</button>
</form><h1>Display Image</h1>
<div id="imageContainer"><!-- 图片将显示在这里 -->
</div><script>// 处理本地服务器上传表单提交document.getElementById('uploadForm').addEventListener('submit', async (event) => {event.preventDefault();const fileInput = document.getElementById('fileInput');const file = fileInput.files[0];if (!file) {alert('Please select a file.');return;}const formData = new FormData();formData.append('file', file);try {// 发送上传请求到本地服务器const response = await fetch('http://localhost:1234/image/upload', {method: 'POST',body: formData});if (!response.ok) {throw new Error('Upload failed');}const imageId = await response.json();alert(`Image uploaded successfully! Image ID: ${imageId}`);// 上传成功后显示图片displayImage(imageId);} catch (error) {console.error('Error:', error);alert('Failed to upload image.');}});// 显示本地服务器图片async function displayImage(imageId) {try {const response = await fetch(`http://localhost:1234/image/${imageId}`);if (!response.ok) {throw new Error('Failed to fetch image');}const imageBlob = await response.blob();const imageUrl = URL.createObjectURL(imageBlob);const imageContainer = document.getElementById('imageContainer');imageContainer.innerHTML = `<img src="${imageUrl}" alt="Uploaded Image" style="max-width: 100%;">`;} catch (error) {console.error('Error:', error);alert('Failed to display image.');}}document.getElementById('aliyunUploadForm').addEventListener('submit', async (event) => {event.preventDefault();const fileInput = document.getElementById('aliyunFileInput');const file = fileInput.files[0];if (!file) {alert('Please select a file.');return;}const formData = new FormData();formData.append('file', file);try {// 发送上传请求到阿里云 OSSconst response = await fetch('http://localhost:1234/image/AliYunImgUpload', {method: 'POST',body: formData});if (!response.ok) {throw new Error('Upload to AliYun OSS failed');}const fileName = await response.text();alert(`Image uploaded to AliYun OSS successfully! File Name: ${fileName}`);} catch (error) {console.error('Error:', error);alert('Failed to upload image to AliYun OSS.');}});// 处理阿里云 OSS 下载表单提交document.getElementById('aliyunDownloadForm').addEventListener('submit', async (event) => {event.preventDefault();const fileNameInput = document.getElementById('fileNameInput');const fileName = fileNameInput.value;if (!fileName) {alert('Please enter a file name.');return;}try {// 发送下载请求到阿里云 OSSconst response = await fetch(`http://localhost:1234/image/AliYunImgDownload?fileName=${fileName}`);if (!response.ok) {throw new Error('Failed to fetch image');}const imageUrl = await response.text();alert(`Image downloaded from AliYun OSS successfully! Image URL: ${imageUrl}`);// 显示图片displayImageFromUrl(imageUrl);} catch (error) {console.error('Error:', error);alert('Failed to download image from AliYun OSS.');}});// 显示阿里云 OSS 图片function displayImageFromUrl(imageUrl) {const imageContainer = document.getElementById('imageContainer');imageContainer.innerHTML = `<img src="${imageUrl}" alt="Uploaded Image" style="max-width: 100%;">`;}
</script>
</body>
</html>

8.启动服务

9.前端选择本地图片并上传

10.弹窗提示上传成功，且会马上调用一次回显从数据库取出图片

11.数据库数据成功添加。

三、OSS存取文件

1.阿里云注册账号

2025主会场_智惠采购季就上阿里云-阿里云采购季https://www.aliyun.com/activity/purchase/purchasing?utm_content=se_10204504842.注册并登录后，搜索ram并创建用户

记得存下id和key，关闭页面后就复制不了了

3.创建后授权

4.购买oss服务，并创建bucket,使用默认的选择即可

创建后点击查看概览

记住红框里面的endpoint值

5.pom添加阿里云oss依赖

<!-- 阿里云对象存储 --><dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alicloud-oss</artifactId><version>2.2.0.RELEASE</version></dependency>

6.修改application.yml内容：(记得替换为自己的数据)

server:port: 1234
spring:datasource:url: jdbc:mysql://localhost:3306/db_image?useSSL=falseusername: rootpassword: 15947035212driver-class-name: com.mysql.jdbc.Driverapplication:name: image-servicecloud:alicloud:access-key: 你的key idsecret-key: 你的key secretoss:endpoint: 你的end pointbucket:name: 你的bucket名
mybatis-plus:mapper-locations: classpath:mapper/*Mapper.xmltype-aliases-package: cn.bit.pro3_1.mapper

7.创建FileController

package cn.bit.pro3_1.controller;import com.aliyun.oss.OSS;
import com.aliyun.oss.model.GeneratePresignedUrlRequest;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;import java.net.URL;
import java.util.Date;@RestController
@CrossOrigin(origins = "*")
public class FileController {@Autowiredprivate OSS ossClient;@Value("${spring.cloud.alicloud.oss.bucket.name}")private String bucketName;@Value("${spring.cloud.alicloud.oss.endpoint}")private String endPoint;/*** 上传文件到阿里云 OSS*/@PostMapping("/image/AliYunImgUpload")public ResponseEntity<String> fileUpload(@RequestParam("file") MultipartFile file) {try {String fileName = new Date().getTime() + "-" + file.getOriginalFilename(); // 使用时间戳避免文件名冲突// 文件上传ossClient.putObject(bucketName, fileName, file.getInputStream());return ResponseEntity.ok(fileName);} catch (Exception e) {return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(e.getMessage());}}/*** 从阿里云 OSS 取回文件*/@GetMapping("/image/AliYunImgDownload")public ResponseEntity<String> fileDownload(@RequestParam("fileName") String fileName) {try {// 设置预签名 URL 的过期时间（例如 1 小时）Date expiration = new Date(System.currentTimeMillis() + 3600 * 1000);// 生成预签名 URLGeneratePresignedUrlRequest request = new GeneratePresignedUrlRequest(bucketName, fileName);request.setExpiration(expiration);URL url = ossClient.generatePresignedUrl(request);// 返回预签名 URLreturn ResponseEntity.ok(url.toString());} catch (Exception e) {return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(e.getMessage());}}
}

8.启动服务后前端选择上传文件到oss

9.oss刷新后能看到上传的文件