建设门户网站需要多少钱,什么是响应式网站设计,淘宝客网站域名备案吗,深圳网站设计公司哪家好??导读#xff1a;本文探讨了在网站开发中图片存储的各种方法#xff0c;包括本地文件系统存储、对象存储服务#xff08;如阿里云OSS#xff09;、数据库存储、分布式文件系统及内容分发网络#xff08;CDN#xff09;。文中详细对比了这些方法的优缺点#xff0c;并… ??导读本文探讨了在网站开发中图片存储的各种方法包括本地文件系统存储、对象存储服务如阿里云OSS、数据库存储、分布式文件系统及内容分发网络CDN。文中详细对比了这些方法的优缺点并针对不同规模的应用推荐了相应的存储策略。此外还提供了一个基于SpringBoot框架实现服务器本地图片存储与回显的具体示例涵盖了从图片上传到通过网关服务安全访问图片的全过程。 文章目录
前言 文件存储分类 本地文件系统存储对象存储服务OSS数据库存储分布式文件系统内容分发网络CDN总结 服务器本地图片存储实现 图片上传实现 Gateway 服务 将图片访问链接添加到白名单跳过登录验证过滤器 Admin 服务 依赖配置文件ControllerService impl 错误码枚举类工具类 图片回显 静态资源处理 功能测试
前言
在开发网站时存储图片是常见的需求之一尤其对于社交平台、电子商务网站等应用。例如社交平台要存储用户头像要存储用户发布的朋友圈图片聊天记录图片等等
文件存储分类
为了满足不同场景下的需求图片存储有多种常见的方式每种方式都有其适用场景和特点。以下是几种常用的图片存储方式及其优缺点分析
本地文件系统存储
描述将图片直接保存在Web服务器的本地文件系统中通常会有一个固定的目录用于存放这些图片文件。
优点
简单易用实现起来非常简单适合小型项目快速搭建或者图片较少的项目。成本低廉初期成本较低不需要额外支付存储费用。
缺点
扩展性差随着图片数量的增加服务器存储空间会变得紧张需要频繁地扩容。备份困难需要手动进行备份且容易出现单点故障。安全性低服务器直接暴露在互联网上存在安全隐患。访问速度受限图片访问速度受限于服务器带宽如果有多人同时访问部分用户需要等待。
对象存储服务OSS
描述使用云服务商提供的对象存储服务如阿里云OSS、AWS S3、Google Cloud Storage等将图片存储在云端。
优点
高可用性和持久性提供多副本冗余确保数据的高可用性和持久性。易于扩展可以根据实际需求动态调整存储空间无需担心物理存储限制。安全性高提供多种安全机制如访问控制、数据加密等。全球分布支持全球多区域部署提高用户访问速度。成本效益按需付费适合业务量波动较大的应用。
缺点
成本随业务增长而增加随着存储和带宽的增加费用也会相应增加。访问速度受网络影响网络状况不佳时图片加载速度可能变慢。依赖第三方服务需要考虑服务商的服务质量和稳定性。需要严格控制图片安全如果没有严格做好防控措施图片一旦被有心之人频繁刷量会造成巨大的费用
数据库存储
描述将图片以二进制形式存储在数据库中通常会使用BLOBBinary Large Object字段。
优点
事务一致性图片和相关数据可以保持事务一致性适合需要强一致性的应用场景。便于管理图片和元数据可以集中管理方便查询和操作。
缺点
性能较差读取和写入大文件时性能较差可能会影响数据库的整体性能。存储成本高数据库存储成本较高不适合大量图片的存储。备份和恢复复杂数据库备份和恢复过程较为复杂且占用较多资源。
分布式文件系统
描述使用分布式文件系统如Hadoop HDFS、GlusterFS等来存储图片适合大规模分布式存储需求。
优点
高可用性和扩展性支持横向扩展可以通过增加节点来提升存储能力和访问性能。容错能力强具有良好的容错能力可以自动处理节点故障。成本效益相对于传统存储方式成本更低适合大规模数据存储。
缺点
复杂度高实现和维护相对复杂需要专业的运维团队。访问速度受网络影响网络状况不佳时访问速度可能受影响。学习曲线陡峭需要一定的学习成本和技术积累。
内容分发网络CDN
描述结合对象存储服务和CDN将图片存储在云存储中并通过CDN加速分发提高全球用户的访问速度。
优点
全球加速通过CDN缓存提高全球用户的访问速度。高可用性和持久性结合对象存储服务确保数据的高可用性和持久性。成本效益按需付费适合业务量大的应用。
缺点
成本较高使用CDN会增加一定的成本。配置复杂需要配置CDN和对象存储服务相对复杂。也要严格做好防控措施否则钱包非常危险
总结
选择合适的图片存储方式需要综合考虑项目的规模、预算、性能要求和未来的扩展性。对于小型项目或初创团队可以先从本地文件系统存储开始随着业务的增长逐步迁移到对象存储服务或分布式文件系统。对于大型应用或全球用户较多的场景建议使用对象存储服务结合CDN以确保高性能和高可用性。
服务器本地图片存储实现
对于个人开发的小网站如果图片不多网站访问量也不多使用服务器本地存储的方式是比较适合的本文主要讲解SpringBoot项目如何实现图片如何存储到服务器本地以及前端要怎样才能显示服务器中的图片资源
演示项目说明该项目使用微服务架构开发请求首先需要通过Gateway网关然后转给对应的Admin服务Admin服务中再处理图片的存储和回显
图片上传实现
Gateway 服务
将图片访问链接添加到白名单跳过登录验证
spring:profiles:active: damWinapplication:name: vrs-gatewaycloud:gateway:routes:- id: vrs-adminuri: lb://vrs-admin/admin/**predicates:- Path/admin/**filters:- name: TokenValidateargs:whitePathList:- /admin/user/v1/login- /admin/user/v1/has-username- /admin/user/v1/register- /admin/pic/过滤器
拦截请求将网关服务的访问域名放置到请求头中这样Admin服务就可以在请求头中拿到网关服务的访问域名了
package com.vrs.config;import org.springframework.beans.factory.annotation.Value;
import org.springframework.cloud.gateway.filter.GlobalFilter;
import org.springframework.context.annotation.Bean;
import org.springframework.http.server.reactive.ServerHttpRequest;
import org.springframework.stereotype.Component;
import org.springframework.web.server.ServerWebExchange;import java.net.InetAddress;
import java.net.UnknownHostException;/*** Author dam* create 2024/11/21 20:55*/Component
public class CustomGlobalFilter {Value(${server.port})private int serverPort;/*** 将网关服务的域名端口放到请求头中方便其他服务使用* return*/Bean(name customGlobalFilter1)public GlobalFilter customGlobalFilter() {return (exchange, chain) - {ServerHttpRequest request exchange.getRequest();String hostAndPort getHostAndPort(request);ServerHttpRequest modifiedRequest request.mutate().header(X-Gateway-Host, hostAndPort).build();ServerWebExchange modifiedExchange exchange.mutate().request(modifiedRequest).build();return chain.filter(modifiedExchange);};}/*** 获取网关服务的访问域名端口* param request* return*/private String getHostAndPort(ServerHttpRequest request) {try {// 获取请求的主机名和端口String host request.getURI().getHost();if (host null) {// 如果请求中没有主机名使用本地主机名host InetAddress.getLocalHost().getHostName();}// 获取请求的协议HTTP或HTTPSString scheme request.getURI().getScheme();return scheme :// host : serverPort;} catch (UnknownHostException e) {return unknown;}}
}Admin 服务
依赖
!-- 图片压缩工具 --
dependencygroupIdnet.coobird/groupIdartifactIdthumbnailator/artifactIdversion0.4.8/version
/dependency配置文件
设置上传的文件大小限制请求的大小限制
spring:servlet:multipart:max-file-size: 10MBmax-request-size: 10MBController
注意里面有一步是从请求头中获取网关的访问域名后面再基于网关的访问域名来拼接图片访问路径不能直接将Admin服务的域名暴露出去不然用户可能直接绕过网关的登录验证来访问Admin服务
package com.vrs.controller;import com.vrs.convention.result.Result;
import com.vrs.service.PictureService;
import jakarta.servlet.http.HttpServletRequest;
import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestHeader;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;import java.util.Map;/*** Author dam* create 2024/11/21 17:00*/
RequiredArgsConstructor
RestController
RequestMapping(/pic/)
public class PictureController {private final PictureService pictureService;/*** 通用上传请求单个*/PostMapping(/upload)public ResultMapString, Object uploadFile(MultipartFile file, HttpServletRequest request) throws Exception {String gatewayHost request.getHeader(X-Gateway-Host);return pictureService.uploadFile(file, gatewayHost);}
}Service
package com.vrs.service;import com.vrs.convention.result.Result;
import org.springframework.web.multipart.MultipartFile;import java.util.Map;/*** Author dam* create 2024/11/21 17:12*/
public interface PictureService {ResultMapString, Object uploadFile(MultipartFile file, String request);
}impl
package com.vrs.service.impl;import com.vrs.common.utils.PictureUploadUtil;
import com.vrs.convention.exception.ClientException;
import com.vrs.convention.result.Result;
import com.vrs.convention.result.Results;
import com.vrs.service.PictureService;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;import java.util.HashMap;
import java.util.Map;import static com.vrs.common.enums.ErrorCodeEnum.PICTURE_UPLOAD_FAIL;/*** Author dam* create 2024/11/21 17:12*/
Service
public class PictureServiceImpl implements PictureService {Overridepublic ResultMapString, Object uploadFile(MultipartFile file, String gatewayDomain) {// 上传并返回新文件名称String fileName PictureUploadUtil.upload(file);String url gatewayDomain /admin fileName;MapString, Object resultMap new HashMap();resultMap.put(url, url);resultMap.put(fileName, fileName);resultMap.put(originalFileName, file.getOriginalFilename());return Results.success(resultMap);}
}错误码枚举类
package com.vrs.common.enums;import com.vrs.convention.errorcode.IErrorCode;/*** 用户错误码*/
public enum ErrorCodeEnum implements IErrorCode {PICTURE_UPLOAD_FAIL(B000301, 图片上传失败),PICTURE_NAME_EXCEED_LENGTH(B000302, 图片名超出长度),PICTURE_SUFFIX_ERROR(B000302, 图片名没有携带正常后缀名),PICTURE_TYPE_ERROR(B000302, 图片格式不对仅限于 .png .jpg .jpeg .gif),;private final String code;private final String message;ErrorCodeEnum(String code, String message) {this.code code;this.message message;}Overridepublic String code() {return code;}Overridepublic String message() {return message;}
}工具类
该工具类主要完成对图片的校验然后将图片存储到服务器本地最后返回图片的访问路径
package com.vrs.common.utils;import com.vrs.convention.exception.ClientException;
import com.vrs.convention.exception.ServiceException;
import net.coobird.thumbnailator.Thumbnails;
import org.springframework.web.multipart.MultipartFile;import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.time.LocalDate;
import java.util.Objects;
import java.util.UUID;import static com.vrs.common.enums.ErrorCodeEnum.*;/*** Author dam* create 2024/11/21 17:18*/
public class PictureUploadUtil {/*** 资源映射路径 前缀*/public static final String PIC_PREFIX /pic;/*** 图片存储的根路径*/public static final String UPLOAD_PATH System.getProperty(user.dir) File.separator upload;/*** 默认的文件名最大长度 100*/public static final int DEFAULT_FILE_NAME_LENGTH 100;public static final String upload(MultipartFile file) {int fileNameLength Objects.requireNonNull(file.getOriginalFilename()).length();if (fileNameLength DEFAULT_FILE_NAME_LENGTH) {// --if-- 如果图片名称过程抛异常throw new ClientException(PICTURE_NAME_EXCEED_LENGTH);}String name file.getOriginalFilename();if (!name.contains(.)) {// --if-- 如果图片没有正常后缀throw new ClientException(PICTURE_SUFFIX_ERROR);} else if (!(name.endsWith(.png) || name.endsWith(.jpg) || name.endsWith(.jpeg) || name.endsWith(.gif))) {// --if-- 校验文件是否为图片类型throw new ClientException(PICTURE_TYPE_ERROR);}String[] split name.split(\.);// 图片名称String fileName split[0];// 图片后缀String fileSuffix split[1];// 获取当前日期LocalDate date LocalDate.now();// 获取年份int year date.getYear();// 获取月份int month date.getMonthValue();// 获取日期int day date.getDayOfMonth();String dir File.separator year File.separator month File.separator day;File dirFile new File(UPLOAD_PATH dir);if (!dirFile.exists()) {// 创建相应日期文件夹dirFile.mkdirs();}// 生成一个唯一IDString uuid UUID.randomUUID().toString().replace(-, );// 相对路径String relativePath dir File.separator fileName - uuid . fileSuffix;// 生成图片要上传到的绝对路径String absPath UPLOAD_PATH relativePath;// 压缩存储
// try (InputStream is file.getInputStream()) {
// // 设置目标文件
// File targetFile new File(absPath);
//
// // 使用Thumbnails库调整图片分辨率
// Thumbnails.of(is)
// // 设置最大宽度和高度保持原始比例
// .size(1920, 1080)
// .toFile(targetFile);
// } catch (Exception e) {
// e.printStackTrace();
// throw new ServiceException(e.getMessage());
// }// 直接保存文件不压缩try (InputStream is file.getInputStream()) {File targetFile new File(absPath);// 将输入流中的数据复制到目标文件中java.nio.file.Files.copy(is, targetFile.toPath(), java.nio.file.StandardCopyOption.REPLACE_EXISTING);} catch (IOException e) {e.printStackTrace();throw new ServiceException(e.getMessage());}return PIC_PREFIX / year / month / day / fileName - uuid . fileSuffix;}}图片回显
图片回显的实现比较简单添加一个配置类即可
静态资源处理
这段代码的作用是把网站上显示图片的URL路径比如 /pic/**映射到服务器上的一个实际文件夹路径。这样设置后用户通过浏览器访问这些URL时就能直接看到存储在服务器指定文件夹里的图片
import com.vrs.common.utils.PictureUploadUtil;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;/*** 通用配置** author dam*/
Configuration
public class ResourcesConfig implements WebMvcConfigurer {Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {// 将图片请求路径映射到对应的本地图片路径registry.addResourceHandler(PictureUploadUtil.PIC_PREFIX /**).addResourceLocations(file: PictureUploadUtil.UPLOAD_PATH /);}}功能测试
使用Apifox软件发起一个Post请求带上要上传的图片 通过链接访问图片测试通过
