Vue中实现图片上传，上传后图片回显，存储图片到服务器 【使用对象存储OSS】

文章主旨：本文详细介绍了在Spring Boot和Vue前后端分离项目中，通过服务端签名后直传阿里云OSS实现图片上传、数据库仅存储URL的完整方案与代码实现。

关键要点：

1. 服务端签名直传流程：用户请求应用服务器获取Policy和签名 → 应用服务器返回签名信息 → 客户端使用POST表单直传文件至OSS，无需暴露AccessKey，安全性高。
2. Spring Boot集成OSS：通过aliyun-oss-spring-boot-starter依赖，配置accessKey、secretKey、endpoint，注入OSSClient完成文件上传/下载操作。
3. 后端接口实现：OssController中的/oss/policy接口生成上传Policy、签名、目录等参数返回前端，限制文件大小、设置过期时间。
4. 前端Vue组件：封装单文件上传组件，调用后端获取签名，通过Element UI的el-upload实现图片上传、回显，上传成功后返回完整URL供父组件使用。
5. 安全与配置：使用Nacos进行动态配置管理，关闭回调功能（服务端签名直传场景），同时支持同名覆盖禁止等OSS特性。

内容结构：

前言

数据库保存图片访问地址而非文件本身，本文讲解如何将图片保存到服务器（OSS），数据库存储URL。流程包括服务端签名直传、Spring Boot接入OSS、前端Vue组件实现。

1. 服务端签名后直传

流程说明

基于Post Policy规则，服务端签名后通过表单直传OSS，安全性高于客户端签名直传。

实现步骤

1. 用户向应用服务器请求上传Policy和签名（通过upload.js设置服务器URL，客户端发送GET请求）。
2. 应用服务器返回上传Policy和签名（json响应包含accessid、policy、signature等）。
3. 用户使用POST方法向OSS发送文件上传请求，携带key、policy、OSSAccessKeyId等字段，可设置x-oss-forbid-overwrite防止覆盖。

1.2 Aliyun Spring Boot OSS 示例（接入微服务）

1.2.1 简略说明

针对Spring Cloud应用使用OSS进行云端文件存储（如电商商品图片），可使用OSS starter简化集成。

1.2.2 步骤

1. 在pom.xml引入aliyun-oss-spring-boot-starter依赖。
2. 在配置文件（如application.properties）配置accessKey、secretKey、endpoint。
3. 注入OSSClient，进行文件上传下载操作。

2. 项目中实际应用

2.1 后端设置

创建专门处理第三方服务的子工程，配置pom（spring-cloud-starter-alicloud-oss）和application.yml（nacos注册、OSS配置）。编写OssController的/oss/policy接口，生成上传Policy、签名、host、dir等参数，返回给前端。

2.2 前端设置

封装singleUpload Vue组件：通过beforeUpload调用后端policy接口获取签名信息，在handleUploadSuccess中拼接文件URL并触发emitInput更新父组件v-model，实现上传成功后的回显。

2.3 实现的效果

图片上传功能演示（原文附效果图，此处概括为“图片上传成功并可回显URL”）。

文章总结：本文是一篇完整的后端+前端技术教程，系统地讲解了基于阿里云OSS的服务端签名直传方案，适合需要实现安全文件上传并存储URL的Web开发者参考。

敏捷团队的最佳测试实践：自动化金字塔

了解更多

热爱技术的小郑

查看原文：Vue中实现图片上传，上传后图片回显，存储图片到服务器 【使用对象存储OSS】

文章来源：

热爱技术的小郑

扫码关注公众号