当前位置： 首页 > backend >正文

SpringBoot + Vue 实现云端图片上传与回显（基于OSS等云存储）

backend 2025/5/18 9:32:24

前言

在实际生产环境中，我们通常会将图片等静态资源存储在云端对象存储服务（如阿里云OSS、七牛云、腾讯云COS等）上。本文将介绍如何改造之前的本地存储方案，实现基于云端存储的图片上传与回显功能。

一、技术选型

  • 云存储服务：阿里云OSS（其他云服务类似）
  • 后端：SpringBoot 2.x + OSS SDK
  • 前端：Vue 2.x + Element UI

二、阿里云OSS准备

  1. 开通OSS服务
  2. 创建Bucket（存储空间）
  3. 获取AccessKey（访问密钥）

三、后端改造

1. 添加OSS依赖

<!-- 阿里云OSS -->
<dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>3.10.2</version>
</dependency>

2. 配置OSS参数

在application.properties中：

# 阿里云OSS配置
aliyun.oss.endpoint=your-oss-endpoint
aliyun.oss.accessKeyId=your-access-key-id
aliyun.oss.accessKeySecret=your-access-key-secret
aliyun.oss.bucketName=your-bucket-name
aliyun.oss.urlPrefix=https://your-bucket-name.oss-cn-hangzhou.aliyuncs.com/

3. 创建OSS配置类

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;@Configuration
public class OssConfig {@Value("${aliyun.oss.endpoint}")private String endpoint;@Value("${aliyun.oss.accessKeyId}")private String accessKeyId;@Value("${aliyun.oss.accessKeySecret}")private String accessKeySecret;@Beanpublic OSS ossClient() {return new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);}
}

4. 创建OSS上传工具类

import com.aliyun.oss.OSS;
import com.aliyun.oss.model.PutObjectRequest;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;import java.io.IOException;
import java.util.UUID;@Component
public class OssUploadUtil {@Autowiredprivate OSS ossClient;@Value("${aliyun.oss.bucketName}")private String bucketName;@Value("${aliyun.oss.urlPrefix}")private String urlPrefix;public String upload(MultipartFile file) throws IOException {// 生成唯一文件名String originalFilename = file.getOriginalFilename();String fileExt = originalFilename.substring(originalFilename.lastIndexOf("."));String newFileName = "images/" + UUID.randomUUID().toString() + fileExt;// 上传到OSSossClient.putObject(new PutObjectRequest(bucketName, newFileName, file.getInputStream()));// 返回完整的访问URLreturn urlPrefix + newFileName;}
}

5. 修改控制器

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;@RestController
@RequestMapping("/api/image")
public class ImageController {@Autowiredprivate OssUploadUtil ossUploadUtil;@PostMapping("/upload")public String uploadImage(@RequestParam("file") MultipartFile file) {if (file.isEmpty()) {return "请选择文件";}try {String imageUrl = ossUploadUtil.upload(file);return imageUrl; // 直接返回完整的图片URL} catch (IOException e) {e.printStackTrace();return "上传失败";}}
}

四、前端改造

前端几乎不需要修改，因为OSS上传后返回的是可以直接访问的URL，比本地存储更简单。

1. 修改上传成功处理

handleUploadSuccess(response, file) {if (response && response.startsWith('http')) {this.imageUrl = response; // 直接使用返回的完整URLthis.$message.success('上传成功');} else {this.$message.error('上传失败');}
}

2. 移除静态资源代理配置

因为图片URL已经是完整的HTTP地址，不再需要代理：

module.exports = {devServer: {proxy: {'/api': {target: 'http://localhost:8080', // 后端地址changeOrigin: true,pathRewrite: {'^/api': ''}}// 移除/images的代理配置}}
};

五、安全增强

1. 后端签名直传（推荐）

更安全的做法是前端从后端获取签名，然后直接上传到OSS，不经过后端服务器：

后端添加签名接口
@GetMapping("/oss/policy")
public Map<String, String> getOssPolicy() {// 设置上传策略long expireTime = 30;long expireEndTime = System.currentTimeMillis() + expireTime * 1000;Date expiration = new Date(expireEndTime);// 设置文件路径和大小限制String dir = "images/";long maxSize = 10 * 1024 * 1024; // 10MB// 生成策略PolicyConditions policyConds = new PolicyConditions();policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, maxSize);policyConds.addConditionItem(PolicyConditions.COND_KEY, PolicyConditions.COND_STARTS_WITH, dir);// 生成签名String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);byte[] binaryData = postPolicy.getBytes(StandardCharsets.UTF_8);String encodedPolicy = BinaryUtil.toBase64String(binaryData);String postSignature = ossClient.calculatePostSignature(postPolicy);// 返回给前端Map<String, String> respMap = new HashMap<>();respMap.put("accessid", accessKeyId);respMap.put("policy", encodedPolicy);respMap.put("signature", postSignature);respMap.put("dir", dir);respMap.put("host", urlPrefix);respMap.put("expire", String.valueOf(expireEndTime / 1000));return respMap;
}
前端改造
<template><el-uploadclass="upload-demo":action="ossUploadUrl":data="ossData":before-upload="beforeUpload":on-success="handleUploadSuccess"><!-- 上传按钮 --></el-upload>
</template><script>
export default {data() {return {ossUploadUrl: '', // OSS上传地址ossData: {}      // OSS上传参数};},methods: {async getOssPolicy() {const res = await this.$axios.get('/api/image/oss/policy');this.ossUploadUrl = res.data.host;this.ossData = {key: res.data.dir + '${filename}', // OSS文件路径policy: res.data.policy,OSSAccessKeyId: res.data.accessid,signature: res.data.signature,success_action_status: '200' // 成功返回状态码};},beforeUpload(file) {// 每次上传前获取新的签名return this.getOssPolicy().then(() => {const isImage = /\.(jpg|jpeg|png|gif)$/i.test(file.name);const isLt10M = file.size / 1024 / 1024 < 10;if (!isImage) {this.$message.error('只能上传图片文件!');}if (!isLt10M) {this.$message.error('图片大小不能超过10MB!');}return isImage && isLt10M;});},handleUploadSuccess(res, file) {// 拼接完整URLthis.imageUrl = this.ossUploadUrl + '/' + file.name;this.$message.success('上传成功');}}
};
</script>

六、总结

云端存储相比本地存储有以下优势：

  1. 高可用性：云服务提供99.9%以上的可用性
  2. 高扩展性：存储空间可无限扩展
  3. 高性能：CDN加速全球访问
  4. 低成本：按量付费，无需自建存储服务器
  5. 安全性：提供多种安全防护机制

本文详细介绍了基于阿里云OSS的图片上传方案，其他云存储服务实现方式类似。签名直传方案既能保证安全性，又能减轻服务器压力，是生产环境推荐的做法。

最重要的啊，也是本人和朋友写代码发现的
就是controller类里面的那个@RequestParam("file")
这个file ，之前我们用的是image 因为这个一个词，改了不下10词代码，最后也是突然醒悟。
下面是正确的方法，可以按照之前的步骤来，大概是不会错了。

 @PostMapping("/upload")public String uploadImage(@RequestParam("file") MultipartFile file) {if (file.isEmpty()) {return "请选择文件";}try {String imageUrl = ossUploadUtil.upload(file);return imageUrl; // 直接返回完整的图片URL} catch (IOException e) {e.printStackTrace();return "上传失败";}}
}

希望这篇文章对大家有帮助！

http://www.xdnf.cn/news/935.html

相关文章：

  • 单片机可以用来做机器人吗？
  • 超详细实现单链表的基础增删改查——基于C语言实现
  • 聚类算法(K-means、DBSCAN)
  • 基于DeepSeek/AI的资产测绘与威胁图谱构建
  • Java高频面试之并发编程-04
  • LangGraph(一)——QuickStart样例中的第一步
  • linux sysfs的使用
  • XAttention
  • 初识Redis · C++客户端list和hash
  • 爬楼梯（每日一题-简单）
  • 240422 leetcode exercises
  • 13 数据存储单位与 C 语言整数类型：从位到艾字节、常见整数类型及其范围、字面量后缀、精确宽度类型详解
  • Kotlin基础（①）
  • 条件变量底层实现原理
  • 2025 年职业院校技能大赛网络建设与运维赛项Docker赛题解析
  • Spark SQL概述（专业解释+生活化比喻）
  • Redis专题
  • NLP高频面试题（四十九）大模型RAG常见面试题解析
  • 基于大模型的血栓性外痔全流程风险预测与治疗管理研究报告
  • 检测IP地址欺诈风险“Scamalytics”
  • M2N2 解读
  • 卷积神经网络--手写数字识别
  • Spark-SQL（四）
  • 微服务架构下数据库范式的失效与反范式设计的崛起
  • 将长循环任务拆分成多个小步骤，以非阻塞的方式执行,在裸机环境下的实现方法
  • 【第16届蓝桥杯C++C组】--- 2025
  • vue2练习项目 家乡特色网站—前端静态网站模板
  • 8. ROS中常见命令
  • Vue中如何优雅地阻止特定标签的移除并恢复其原始位置
  • 代码随想录算法训练营Day32