阿里云OSS开通搭建(傻瓜式)案例课程管理快速入门

2022-05-30 509

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

对象存储 OSS，20GB 3个月

对象存储 OSS，内容安全 1000次 1年

对象存储 OSS，恶意文件检测 1000次 1年

简介： 阿里云OSS开通搭建(傻瓜式)案例课程管理快速入门

1.开通OSS服务

微信图片_20220530120649 - 副本.png 微信图片_20220530120705 - 副本.png

微信图片_20220530120712.png

2.搭建OSS环境

2.1创建Bucket存储空间

选择 Bucket列表，进行Bucket创建

微信图片_20220530121012.png

2.2创建文件夹上传图片

创建文件夹
上传图片

2.3RAM访问控制

在头像中，点击“AccessKey管理”进行RAM设置

安全提醒，使用子用户

创建用户组：微信图片_20220530121252.png 微信图片_20220530121300.png

添加用户微信图片_20220530121434.png

添加用户到用户组微信图片_20220530121439.png

设置权限微信图片_20220530121516.png

获取子用户AccessKeyId,AccessKeySecret

2.快速入门

2.1下载SDK

在“常用入口”中，点击“SDK下载”
点击“Java SDK”
添加坐标

<dependency>
    <groupId>com.aliyun.oss</groupId>
    <artifactId>aliyun-sdk-oss</artifactId>
    <version>3.10.2</version>
</dependency>

2.2创建存储空间

// Endpoint以杭州为例，其它Region请按实际情况填写。
String endpoint = "https://oss-cn-hangzhou.aliyuncs.com";
// 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。
String accessKeyId = "<yourAccessKeyId>";
String accessKeySecret = "<yourAccessKeySecret>";
String bucketName = "<yourBucketName>";
// 创建OSSClient实例。
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
// 创建存储空间。
ossClient.createBucket(bucketName);
// 关闭OSSClient。
ossClient.shutdown();

例如：

1.

package com.czxy;
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import org.junit.Test;
public class TestOss {
    @Test
    public void testCreateBucket() {
        // Endpoint以杭州为例，其它Region请按实际情况填写。
        String endpoint = "oss-cn-shanghai.aliyuncs.com";
        // 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。
        String accessKeyId = "LTAI5t7oNGMkQJ1X8RqtLet2";
        String accessKeySecret = "这里是密码";
        String bucketName = "czxy-lt-01";
        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
        // 创建存储空间。
        ossClient.createBucket(bucketName);
        // 关闭OSSClient。
        ossClient.shutdown();
    }
}

微信图片_20220530121750.png

2.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 = "LTAI5t7oNGMkQJ1X8RqtLet2";
        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);
    }

3.课程管理

3.1需求

3.2前端实现

添加上传组件和头像组件

        <el-form-item label="课程封面">
          <el-upload
            class="upload-demo"
            :action="updateUrl"
            :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    }

3.3后端测试数据

微信图片_20220530122116.png

    @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);
    }

3.4后端实现

3.4.1配置类

yml 配置

aliyun:
  oss:
    file:
      endpoint: oss-cn-shanghai.aliyuncs.com
      keyId: LTAI5t7oNGMkQJ1X8RqtLet2
      keySecret: 这里是密码
      dirName: avatar
      bucketName: czxy-lt

微信图片_20220530122356.png

配置类

package com.czxy.zx.course.oss;
import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;
@Data
@Component
@ConfigurationProperties(prefix = "aliyun.oss.file")
public class OssProperties {
    private String endpoint;
    private String keyId;
    private String keySecret;
    private String dirName;
    private String bucketName;
}

微信图片_20220530122401.png

3.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;
@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 = "https://"+ossProperties.getBucketName()+"."+ossProperties.getEndpoint()+"/" + path;
            return url;
        } catch (IOException e) {
            throw new EduException("文件上传有误");
        }
    }
}

3.4.3上传功能

微信图片_20220530122535.png

注入工具微信图片_20220530122543.png

调用工具

    @PostMapping("/avatar/upload")
    public BaseResult avatarUpload(MultipartFile file) {
        String url = ossUtils.upload(file);
        return BaseResult.ok("上传成功", url);
    }