vue+elmentUI+springboot实现阿里云oss的图片上传_vue+springboot头像上传下载-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_46119030/article/details/112977169

这篇博客介绍了如何使用Vue、ElementUI和SpringBoot实现阿里云OSS的图片上传。从获取OSS配置、后端代码解析、Postman测试到前端实现，详细阐述了每个步骤，包括AccessKey ID和AccessKey Secret的获取，以及后端配置、service和controller的编写，最后展示了前端使用ElementUI进行图片上传的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

OSS图片上传步骤

一、获取OSS的相关配置
- ①创建阿里云的账号，购买oss
- ②创建Bucket，获取AccessKey ID和AccessKey Secret
二、后端代码解读
三、postman上传文件测试
四、前端代码

一、获取OSS的相关配置

前几天研究了一下阿里云的oss图片上传，觉得网上的代码要不就是没有写完，要不就是不够全面。于是自己整理了一下，后端的代码大都来自另一位作者，下面有标明出处。
可能有点长，挑重点看。

①创建阿里云的账号，购买oss

首先登陆阿里云的官网: 阿里云官网，注册一个账号。可以用钉钉或者支付宝注册。
然后，去开通oss服务。因为我是开通了的，所以图片上显示的是控制台，没有开通的会显示开通服务。在这里插入图片描述
然后根据步骤来开通就好。
阿里云会有新人活动，满足注册未满6个月而且没有购买过阿里云的用户即可免费领取一个月，找不到的搜索 “试用中心”。
不过一般来说，他们的客服会非常贴心的打来电话和你聊聊。
在这里插入图片描述
我是全部选了默认。

②创建Bucket，获取AccessKey ID和AccessKey Secret

找到控制台，打开左侧菜单栏的对象存储oss。
找到右边的创建Bucket，这个东西就像你git上放项目的库，之后会把上传的东西放在上面。
在这里插入图片描述
因为只是试用，其他的多余的并没有开通。

首先是地域，选自己近的就好，之后要用到。

修改了文件的权限为公共读，可以让浏览器通过url访问到。

然后就是存储类型，收费是不同的，标准存储最贵。他会提示你的，不过我是领了免费的，所以选了最贵的。
在这里插入图片描述

在这里插入图片描述
然后再创建一个文件夹。
就可以手动的添加文件了，当然我们的目的是要在用vue+springboot的上传，并且传入数据库，可以在查看新闻的时候查看图片。

现在，来获取AccessKey ID和AccessKey Secret。
在这里插入图片描述
创建key

一定要及时保存，不然的话，key之后就找不到了。

二、后端代码解读

图片上传的代码研究了好久，也没写好，可能是我太蠢了吧哈哈哈哈。
不过找到了另一位的作者的文章，我就是用了他的，代码很简洁，而且注释多，还有源码。^ _ ^
springboot操作阿里云OSS实现文件上传，下载，删除(附源码)

①依赖和application.yml的配置

其中第一个依赖，源码说他的版本不加上会报错，我是
spring-boot:2.1.17版本，不加第一个依赖，也不会报错。主要是后面两个依赖。

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>
        <!-- aliyun-oos -->
        <dependency>
            <groupId>com.aliyun.oss</groupId>
            <artifactId>aliyun-sdk-oss</artifactId>
            <version>2.8.3</version>
        </dependency>
        <dependency>
            <groupId>joda-time</groupId>
            <artifactId>joda-time</artifactId>
            <version>2.10.1</version>
        </dependency>

配置application.yml也可以叫application.properties，我在这里发现一个东西很奇妙。
大家知道xxx.yml和xxx.properties其实是一个东西，不过yml有更好的书写规范。在springboot的配置中，是可以随时相互切换的。如下，是不是觉得右边的看起来更舒服。在这里插入图片描述

然后我在写代码的时候原本的properties切换成了yml结尾，然后报了一个文件找不到的错。
所以我就有个疑问了，之前springboot的配置文件，我都是随便什么格式都可以用，这个因为有一个配置类写了@PropertySource(value = {“classpath:application.yml”})然后如果代码是yml但是你写的是properties他就会报错，注释不加后缀也会报错。
觉得很神奇，但是暂时没找到原因。(个_个)

好，话题回来，继续配置。
accessKeyId: 你的id，之前保存了的
accessKeySecret: 你的key
bucketName: 你的仓库名
endPoint: 请对照的你选择的仓库（访问域名）
fileHost: 在bucket中创建的文件夹名
urlPrefix: 地址，http://+仓库名+外网地址

max-file-size: 单个文件上传最大
max-request-size: 一次性上传最大
如果是想要不限制文件上传的大小，那么就把两个值都设置为-1（没试验过，因为网速太差）

# 这是yml格式
aliyun:
    accessKeyId: LTAI4G8UhTXXXXXXXXXXX
    accessKeySecret: gXKga5z9fHrKHswXXXXXXXXXX
    bucketName: news-01
    endPoint: oss-cn-shanghai.aliyuncs.com
    fileHost: test1
    urlPrefix: http://news-01.oss-cn-shanghai.aliyuncs.com/
spring:
    servlet:
        multipart:
            max-file-size: 100MB
            max-request-size: 1000MB

# 这是properties格式
aliyun.accessKeyId=LTAI4G8UhTXXXXXXXXXXX
aliyun.accessKeySecret=gXKga5z9fHrKHswXXXXXXXXXX
aliyun.bucketName=news-01
aliyun.endPoint=oss-cn-shanghai.aliyuncs.com
aliyun.fileHost=test1
aliyun.urlPrefix=http://news-01.oss-cn-shanghai.aliyuncs.com/
spring.servlet.multipart.max-file-size=100MB
spring.servlet.multipart.max-request-size=1000MB

好了，application.properties的配置就到这了。

②配置类AliyunOssConfig

配置类主要住吧刚刚配置的application.yml的内容加入到spring上下文，要你可以通过注入去找到这个属性的值。

package com.zking.springboot2.util;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClient;
import lombok.Data;
import lombok.experimental.Accessors;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.anno