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

上传文件 policy 直传 <

发布于 2026-06-12

109

版权声明

我们非常重视原创文章，为尊重知识产权并避免潜在的版权问题，我们在此提供文章的摘要供您初步了解。如果您想要查阅更为详尽的内容，访问作者的公众号页面获取完整文章。

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

文章来源：

热爱技术的小郑

扫码关注公众号

扫码阅读

手机扫码阅读

文章主旨

本文介绍如何通过服务端签名直传方式将图片上传至阿里云OSS，数据库仅保存图片访问地址，并提供Spring Boot后端与Vue前端的具体实现示例。

关键要点

服务端签名直传流程：用户向应用服务器请求Policy和签名，应用服务器返回签名信息，用户再使用表单直传至OSS。
服务端签名直传无需暴露AccessKey，安全性高于客户端签名直传。
Spring Boot集成Aliyun OSS Starter：引入依赖、配置accessKey/secretKey/endpoint、注入OSSClient进行文件操作。
实际项目中，后端通过OssController提供/policy接口，生成并返回上传所需的host、policy、signature、dir等信息。
前端Vue组件实现图片上传，调用policy接口获取签名，使用表单直传文件，上传成功后回显图片地址。

内容结构

前言

数据库通常不保存图片文件，只保存访问地址。本文讲解如何将图片保存到服务器（OSS），数据库只保存连接。

1. 服务端签名后直传

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

图1 上传流程图（略）
实现步骤：
1. 用户向应用服务器请求上传Policy和回调。客户端代码中设置serverUrl为应用服务器地址，注释掉回调字段。
2. 应用服务器返回上传Policy和签名。返回JSON包含key、policy、OSSAccessKeyId、success_action_status、signature等。
3. 用户使用Post方法向OSS发送文件上传请求。注意表单域大小限制和同名覆盖控制。

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

1.2.1 简略说明

适用于Spring Cloud应用，通过OSS Starter实现文件存储（如商品图片）。

1.2.2 步骤

修改pom.xml引入aliyun-oss-spring-boot-starter。
在配置文件（application.properties）中配置accessKey、secretKey、endpoint。
注入OSSClient进行文件上传下载操作，示例为ossClient.getObject()。

2. 项目中实际应用

2.1 后端设置

创建专门处理第三方服务的子模块，pom引入spring-cloud-starter-alicloud-oss，application.yml配置aliCloud、oss、nacos注册等。编写OssController提供/oss/policy接口，生成并返回host、policy、signature、dir、expire等数据。

2.2 前端设置

封装Vue组件singleUpload，调用policy接口获取签名，使用Element UI的el-upload组件进行上传，实现上传进度、成功回调、图片回显等功能。核心代码包括beforeUpload中请求policy，handleUploadSuccess中拼接图片URL并触发input事件。