1、技术选型：
（1）Vue（前端）
（2）Element(上传图片组件)
（3）SpringBoot（后端）
（4）Mybatis(数据库操作)
（3）OSS(阿里云存储服务器)
2、实现效果概述：
（1）图片展示墙（做了一个简单的，没有太花里胡哨）
（2）上传页面
3、项目概述：
注意这是一个练习项目，练习项目，练习项目,可能存在一些小问题！
简单来说，
=（1）图片上传逻辑：=
前端通过elementUI的上传图片的组件将图片进行上传，后端利用SpringBoot写的后端逻辑接受了前端穿过的图片，首先将图片上传到阿里云的OSS对象存储系统上，然后返回图片的地址存储到数据库。
=（2）图片展示墙逻辑：=
通过查询数据库的图片地址返回给前端，然后前端通过for循环，利用img标签对图片进行循环遍历然后显示！
项目简单，易于实现，全代码黏贴！！！！！！
4、图片上传
（1）前端项目结构：
（2）ImagesUpload.vue
=补充：这里主要是借助了elementUI的上传图片组件！！！！
这里只需要将action中的地址改成自己的后端请求地址就可以！！！=
<template>
<div>
<el-upload
action="http://localhost:8086/images/upload"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
</div>
</template>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<script>
export default {
name: "images-upload",
data() {
return {
dialogImageUrl: '',
dialogVisible: false
};
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
}
}
}
</script>
<style scoped>
</style>
==前端逻辑完成，开始后端逻辑=
（3）安装阿里云OSS所需依赖：
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
<version>2.8.3</version>
</dependency>
（4）OSS工具类封装：
=这里根据自己的实际情况合理选择域名，访问用户，秘钥…=
package com.blog.util;
/**
* @author
* @version 1.0
* @description TODO
* @date 2023/3/12 8:28
*/
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.InputStream;
import java.net.URI;
import java.net.URL;
import java.util.Date;
import java.util.Random;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.util.StringUtils;
import org.springframework.web.multipart.MultipartFile;
import com.aliyun.oss.OSSClient;
import com.aliyun.oss.model.ObjectMetadata;
import com.aliyun.oss.model.PutObjectResult;
public class OSSClientUtil {
/**
* log日志
*/
public static final Logger logger = LoggerFactory.getLogger(OSSClientUtil.class);
/**
* 访问域名
*/
private String endpoint = "oss-cn-beijing.aliyuncs.com";
/**
* accessKey访问秘钥
* 访问用户
*/
private String accessKeyId = "########";
/**
* 密钥
*/
private String accessKeySecret = "################";
/**
* 空间 名称
*/
private String bucketName = "############";
/**
* 文件存储目录
*/
private String filedir = "###########/";
private OSSClient ossClient;
public OSSClientUtil() {
ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
}
/**
* 初始化
*/
public void init() {
ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
}
/**
* 销毁
*/
public void destory() {
ossClient.shutdown();
}
/**
* 上传图片
*
* @param url
* @throws
*/
public void uploadImg2Oss(String url) throws IOException {
File fileOnServer = new File(url);
FileInputStream fin;
try {
fin = new FileInputStream(fileOnServer);
String[] split = url.split("/");
this.uploadFile2OSS(fin, split[split.length - 1]);
} catch (FileNotFoundException e) {
throw new IOException("图片上传失败");
}
}
public String uploadImg2Oss(MultipartFile file) throws IOException {
if (file.getSize() > 10 * 1024 * 1024) {
throw new IOException("上传图片大小不能超过10M！");
}
String originalFilename = file.getOriginalFilename();
String substring = originalFilename.substring(originalFilename.lastIndexOf(".")).toLowerCase();
Random random = new Random();
String name = random.nextInt(10000) + System.currentTimeMillis() + substring;
try {
InputStream inputStream = file.getInputStream();
this.uploadFile2OSS(inputStream, name);
return name;
} catch (Exception e) {
throw new IOException("图片上传失败");
}
}
/**
* 获得图片路径
*
* @param fileUrl
* @return
*/
public String getImgUrl(String fileUrl) {
System.out.println(fileUrl);
if (!StringUtils.isEmpty(fileUrl)) {
String[] split = fileUrl.split("/");
return this.getUrl(this.filedir + split[split.length - 1]);
}
return "" ;
}
/**
* 上传到OSS服务器 如果同名文件会覆盖服务器上的
*
* @param instream
* 文件流
* @param fileName
* 文件名称 包括后缀名
* @return 出错返回"" ,唯一MD5数字签名
*/
public String uploadFile2OSS(InputStream instream, String fileName) {
String ret = "";
try {
// 创建上传Object的Metadata
ObjectMetadata objectMetadata = new ObjectMetadata();
objectMetadata.setContentLength(instream.available());
objectMetadata.setCacheControl("no-cache");
objectMetadata.setHeader("Pragma", "no-cache");
objectMetadata.setContentType(getcontentType(fileName.substring(fileName.lastIndexOf("."))));
objectMetadata.setContentDisposition("inline;filename=" + fileName);
// 上传文件
PutObjectResult putResult = ossClient.putObject(bucketName, filedir + fileName, instream, objectMetadata);
ret = putResult.getETag();
} catch (IOException e) {
logger.error(e.getMessage(), e);
} finally {
try {
if (instream !=null ) {
instream.close();
}
} catch (IOException e) {
e.printStackTrace();
}
}
return ret;
}
/**
* Description: 判断OSS服务文件上传时文件的contentType
*
* @param
*
* @return String
*/
public static String getcontentType(String filenameExtension) {
if (filenameExtension.equalsIgnoreCase("bmp")) {
return "image/bmp";
}
if (filenameExtension.equalsIgnoreCase("gif")) {
return "image/gif";
}
if (filenameExtension.equalsIgnoreCase("jpeg") || filenameExtension.equalsIgnoreCase("jpg")
|| filenameExtension.equalsIgnoreCase("png")) {
return "image/jpeg";
}
if (filenameExtension.equalsIgnoreCase("html")) {
return "text/html";
}
if (filenameExtension.equalsIgnoreCase("txt")) {
return "text/plain";
}
if (filenameExtension.equalsIgnoreCase("vsd")) {
return "application/vnd.visio";
}
if (filenameExtension.equalsIgnoreCase("pptx") || filenameExtension.equalsIgnoreCase("ppt")) {
return "application/vnd.ms-powerpoint";
}
if (filenameExtension.equalsIgnoreCase("docx") || filenameExtension.equalsIgnoreCase("doc")) {
return "application/msword";
}
if (filenameExtension.equalsIgnoreCase("xml")) {
return "text/xml";
}
return "image/jpeg";
}
/**
* 获得url链接
*
* @param key
* @return
*/
public String getUrl(String key) {
// 设置URL过期时间为10年 3600l* 1000*24*365*10
Date expiration = new Date(System.currentTimeMillis() + 3600L * 1000 * 24 * 365 * 10);
// 生成URL
// URL url = ossClient.generatePresignedUrl(bucketName, key, expiration);
String url = "https://"+bucketName+"."+endpoint+"/"+key;
if (url != null) {
return url.toString();
}
return "";
}
}
（5）Controller层：
package com.blog.controller.Vue;
import com.blog.pojo.Images;
import com.blog.service.ImagesService;
import com.blog.util.FileUtil;
import com.blog.util.OSSClientUtil;
import com.sun.jersey.api.client.Client;
import com.sun.jersey.api.client.WebResource;
import io.swagger.annotations.Api;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;
/**
* @author
* @version 1.0
* @description TODO
* @date 2023/3/11 10:39
*/
@RestController
@RequestMapping("/images")
public class UploadController {
@Autowired
ImagesService imagesService;
@PostMapping("/upload")
public Map<String, Object> fileupload(MultipartFile file, HttpServletRequest req) throws IOException {
if (file == null || file.getSize() <= 0) {
throw new IOException("file不能为空");
}
//获取文件的大小,单位/KB
long size = file.getSize();
OSSClientUtil ossClient=new OSSClientUtil();
//将文件上传
String name = ossClient.uploadImg2Oss(file);
//获取文件的URl地址 以便前台 显示
String imgUrl = ossClient.getImgUrl(name);
HashMap<String, Object> map=new HashMap<>();
//文件存储的路径
map.put("name", imgUrl);
Images images = new Images();
images.setImg(imgUrl);
System.out.println("添加数据");
imagesService.insert(images);
return map ;
}
}
（6）Service层：
package com.blog.service;
import com.blog.pojo.Images;
import java.util.List;
public interface ImagesService {
int insert(Images images);
List<Images> getImages();
}
（7）ServiceImpl：
package com.blog.service.impl;
import com.blog.dao.ImagesDao;
import com.blog.pojo.Images;
import com.blog.service.ImagesService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
/**
* @author
* @version 1.0
* @description TODO
* @date 2023/3/12 10:38
*/
@Service
public class ImagesServiceImpl implements ImagesService {
@Autowired
ImagesDao imagesDao;
@Override
public int insert(Images images) {
return imagesDao.insert(images);
}
@Override
public List<Images> getImages() {
return imagesDao.getImages();
}
}
（8）Dao层：
package com.blog.dao;
import com.blog.pojo.Images;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;
import java.util.List;
@Mapper
@Repository
public interface ImagesDao {
int insert(Images images);
List<Images> getImages();
}
（9）xml层:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.blog.dao.ImagesDao">
<resultMap id="images" type="Images">
<id property="id" column="id"/>
<result property="img" column="img"/>
</resultMap>
<insert id="insert" parameterType="Images">
insert into t_images (img)
values (#{
img});
</insert>
<select id="getImages" resultMap="images">
select * from t_images
</select>
</mapper>
（10）实体类：
package com.blog.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
/**
* @author
* @version 1.0
* @description TODO
* @date 2023/3/12 10:33
*/
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Images {
private Integer id;
private String img;
}
5、照片墙功能：
（1）前端项目结构：
（2）Waterfall组件（主要是通过一个瀑布流图片展示组件来实现）
<template>
<div class="m-waterfall-wrap" :style="`background: ${backgroundColor}; width: ${width}px; padding: ${columnGap}px; column-count: ${columnCount}; column-gap: ${columnGap}px;`">
<div class="m-img" :style="`margin-bottom: ${columnGap}px;`" v-for="(item, index) in imageData" :key="index">
<img class="u-img" :src="item.img" :title="item.title" :alt="item.title" />
</div>
</div>
</template>
<script>
/*
纯CSS，实现简单，但图片顺序是每列从上往下排列
*/
export default {
name: 'Waterfall',
props: {
imageData: {
// 瀑布流的图片数组
type: Array,
required: true,
default: () => {
return []
}
},
columnCount: {
// 瀑布流要划分的列数
type: Number,
default: 3
},
columnGap: {
// 瀑布流各列之间的间隙
type: Number,
default: 30
},
totalWidth: {
// 瀑布流区域的总宽度
type: Number,
default: 1200
},
backgroundColor: {
// 瀑布流区域背景填充色
type: String,
default: '#F2F4F8'
}
},
computed: {
width () {
return this.totalWidth - 2 * this.columnGap
}
}
}
</script>
<style lang="less" scoped>
.m-waterfall-wrap {
.m-img {
.u-img {
width: 100%;
vertical-align: bottom;
}
}
}
</style>
（3）ImagesShow.vue（照片墙显示页面，借助于上一个瀑布流图片展示组件）
=①在这里需要注意路径问题，这里./代表了本项目所在的目录，在引入组件地址的时候，要根据自己项目的实际路径合理改变！=
<template>
<div style="background-color: #fffef9">
<p style="text-align: center;font-size: 24px;font-family: 'Adobe 黑体 Std R'" >图片展示墙</p>
<Waterfall
:imageData="images"
:columnCount="3"
:columnGap="30"
:totalWidth="totalWidth"
style="margin: 0 auto"
backgroundColor="#f6f5ec" />
</div>
</template>
<script>
import Waterfall from '../../components/Waterfall.vue'
import {
list} from '../../api/images';
export default {
name: "images-show",
components:{
Waterfall
},
data(){
return{
//screenWidth: document.body.clientWidth, // 屏幕宽度
totalWidth: document.body.clientWidth, // 屏幕高度
images:[],
}
},
mounted() {
window.screenWidth = document.body.clientWidth;
window.screenHeight = document.body.clientHeight;
this.screenWidth = window.screenWidth;
this.screenHeight = window.screenHeight;
console.log(window.screenWidth);
console.log(window.screenHeight);
console.log(this.screenWidth);
console.log(this.screenHeight);
},
created(){
this.test();
},
methods:{
test(){
console.log("测试")
list().then(res=>{
this.images = res.data;
console.log(res)
})
},
}
}
</script>
<style scoped>
</style>
（4）images.js
import request from '@/request/request'
export function list() {
return request({
url: '/imagesList/list',
method: 'get',
})
}
=配置到这里，那么前端核心的逻辑已经写完了=
（5）ImagesController
package com.blog.controller.Vue;
import com.blog.pojo.Images;
import com.blog.service.ImagesService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
/**
* @author
* @version 1.0
* @description TODO
* @date 2023/3/12 11:00
*/
@RestController
@RequestMapping("/imagesList")
public class ImagesController {
@Autowired
ImagesService imagesService;
@GetMapping("/list")
public List<Images> getImagesList(){
List<Images> images = imagesService.getImages();
return images;
}
}
（6）关于service层、Dao层、实体类都在图片上传的ImagesService里，在这里我就不重复添加了！！！
6、总结：
（1）利用了vue、element组件搭建了前端
（2）利用SpringBoot、Mybatis实现了后端
（3）借助OSS组件将图片上传到了阿里云OSS
7、补充：
如果你对阿里云的OSS不太熟悉，那么给你推荐几篇博客，加速理解。
=（1）阿里云OSS注册及功能详解：=
https://blog.csdn.net/weixin_52851967/article/details/126924361
=（2）SpringBoot整合阿里云OSS云存储=
https://blog.csdn.net/qq_43021813/article/details/82665394
=（3）可能碰到的问题，以我为例，我创建的是私有Bucket,所以只有带着秘钥的时候才能访问，只根据图片路径而不带秘钥是无法访问的，这篇博客包含了我遇到的一些问题！=
https://blog.csdn.net/H_Q_Li/article/details/126471699
