【在线教育】课程封面上传图片到阿里云OSS
文章目录
1.OSS
1.1 开通OSS服务
1.2 搭建OSS环境
1.2.1 创建Bucket存储空间
-
选择 Bucket列表，进行Bucket创建
![]()
-
选择：标准存储、关闭冗余、不开通版本控制、公共读、无加密、不开通日志、不开通备份
1.2.2 创建文件夹上传图片
-
创建文件夹
![]()
-
上传图片
1.2.3 RAM 访问控制
-
在头像中，点击“AccessKey管理”进行RAM设置
![]()
-
安全提醒，使用
子用户![]()
-
创建用户组：
![]()
![]()
-
添加用户
![]()
-
添加用户到用户组
![]()
-
设置权限
![]()
-
获取子用户AccessKeyId,AccessKeySecret
![]()
1.3 快速入门
1.3.1 下载SDK
-
在“常用入口”中，点击“SDK下载”
![]()
-
点击“Java SDK”
1.3.2 搭建环境
-
创建项目：zx-test-oss31
-
添加坐标
<dependency> <groupId>com.aliyun.oss</groupId> <artifactId>aliyun-sdk-oss</artifactId> <version>3.15.0</version> </dependency>
1.3.2 创建存储空间[可选]
-
例如：
package com.czxy;
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import org.junit.Test;
/**
* @author 桐叔
* @email liangtong@itcast.cn
*/
public class TestOss {
@Test
public void testCreateBucket() {
// Endpoint以杭州为例，其它Region请按实际情况填写。
String endpoint = "oss-cn-shanghai.aliyuncs.com";
// 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。
String accessKeyId = "这里是账号";
String accessKeySecret = "这里是密码";
String bucketName = "czxy-lt-01";
// 创建OSSClient实例。
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
// 创建存储空间。
ossClient.createBucket(bucketName);
// 关闭OSSClient。
ossClient.shutdown();
}
}
1.3.3 上传图片
-
参考代码位置：
-
例如：
@Test
public void testUpload() throws FileNotFoundException {
// yourEndpoint填写Bucket所在地域对应的Endpoint。以华东1（杭州）为例，Endpoint填写为https://oss-cn-hangzhou.aliyuncs.com。
String endpoint = "oss-cn-shanghai.aliyuncs.com";
// 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
String accessKeyId = "这是账号";
String accessKeySecret = "这是密码";
// 创建OSSClient实例。
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
String path = "avatar/" + System.currentTimeMillis() + ".png";
// 数据流
InputStream inputStream = new FileInputStream("C:/Users/Administrator/Desktop/1/cz.png");
// 填写Bucket名称和Object完整路径。Object完整路径中不能包含Bucket名称。
ossClient.putObject("czxy-lt", path, inputStream);
// 关闭OSSClient。
ossClient.shutdown();
// https://czxy-lt.oss-cn-shanghai.aliyuncs.com/avatar/1616253283637.png
String url = "https://czxy-lt.oss-cn-shanghai.aliyuncs.com/" + path;
System.out.println(url);
}
2. 课程管理--课程封面
2.1 需求
2.2 前端实现
2.2.1 上传成功处理
-
添加上传组件和头像组件
<el-form-item label="课程封面"> <el-upload class="upload-demo" :action="updateUrl" list-type="picture-card" :limit="1" :on-exceed="handleExceed" :on-success="avatarUploadSuccess"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> </el-upload> <el-avatar shape="square" :size="50" :src="course.cover"></el-avatar> </el-form-item>
-
编写上传路径
data() { return { updateUrl: process.env.VUE_APP_BASE_API + '/course-service/course/avatar/upload', //上传路径 } } -
编写处理函数：上传成功后，显示头像
handleExceed(files, fileList) { //默认 this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`); }, avatarUploadSuccess(response) { // 设置头像 this.course.cover = response.data }
2.2.2 显示已有封面
-
提供变量
![]()
-
将变量上传组件绑定
![]()
-
查询详情时，将封面图片路径添加变量中
![]()
2.3 后端测试数据
@PostMapping("/avatar/upload")
public BaseResult avatarUpload(MultipartFile file) {
String url = "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80";
return BaseResult.ok("上传成功", url);
}
2.4 后端实现
2.4.1 搭建环境
-
添加坐标
![]()
<dependency> <groupId>com.aliyun.oss</groupId> <artifactId>aliyun-sdk-oss</artifactId> <version>3.15.0</version> </dependency>
2.4.2 配置类
-
yml 配置
aliyun: oss: file: pathProtocol: https endpoint: oss-cn-shanghai.aliyuncs.com keyId: LTAI5t7oNGMkQJ1X8RqtLet2 keySecret: 这里是密码 dirName: avatar bucketName: czxy-lt
![]()
-
配置类
package com.czxy.zx.course.oss; import lombok.Data; import org.springframework.boot.context.properties.ConfigurationProperties; import org.springframework.stereotype.Component; /** * @author 桐叔 * @email liangtong@itcast.cn */ @Data @Component @ConfigurationProperties(prefix = "aliyun.oss.file") public class OssProperties { private String pathProtocol; //路径协议 private String endpoint; //地域 private String keyId; //账号 private String keySecret; //密码 private String dirName; //上传目录 private String bucketName; //Bucket 名称 } ![]()
2.4.2 上传工具类
package com.czxy.zx.course.oss;
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.czxy.zx.exception.EduException;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;
import javax.annotation.Resource;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
/**
* @author 桐叔
* @email liangtong@itcast.cn
*/
@Component
public class OssUtils {
@Resource
private OssProperties ossProperties;
public String upload(MultipartFile file) {
if(file == null) {
throw new EduException("上传文件为空");
}
try {
// 创建OSSClient实例。
OSS ossClient = new OSSClientBuilder().build(ossProperties.getEndpoint(), ossProperties.getKeyId(), ossProperties.getKeySecret());
String path = ossProperties.getDirName() + "/" + System.currentTimeMillis() + ".png";
// 数据流
InputStream inputStream = file.getInputStream();
// 填写Bucket名称和Object完整路径。Object完整路径中不能包含Bucket名称。
ossClient.putObject(ossProperties.getBucketName(), path, inputStream);
// 关闭OSSClient。
ossClient.shutdown();
String url = ossProperties.getPathProtocol() + "://"+ossProperties.getBucketName()+"."+ossProperties.getEndpoint()+"/" + path;
return url;
} catch (IOException e) {
throw new EduException("文件上传有误");
}
}
}
2.4.3 上传功能
-
注入工具
![]()
-
调用工具
@Resource private OssUtils ossUtils; @PostMapping("/avatar/upload") public BaseResult avatarUpload(MultipartFile file) { String url = ossUtils.upload(file); return BaseResult.ok("上传成功", url); }
浙公网安备 33010602011771号