【在线教育】课程封面上传图片到阿里云OSS

文章目录

1.OSS

1.1 开通OSS服务

1.2 搭建OSS环境

1.2.1 创建Bucket存储空间

1.2.2 创建文件夹上传图片

1.2.3 RAM 访问控制

1.3 快速入门

1.3.1 下载SDK

1.3.2 搭建环境

1.3.2 创建存储空间[可选]

1.3.3 上传图片

2. 课程管理--课程封面

2.1 需求

2.2 前端实现

2.2.1 上传成功处理

2.2.2 显示已有封面

2.3 后端测试数据

2.4 后端实现

2.4.1 搭建环境

2.4.2 配置类

2.4.2 上传工具类

2.4.3 上传功能

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

• 添加坐标

    com.aliyun.oss
    aliyun-sdk-oss
    3.15.0

1.3.2 创建存储空间[可选]

• 快速入门 - 对象存储 OSS - 阿里云

 

• 例如：

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 上传成功处理

• 添加上传组件和头像组件

          
            
              点击上传
              
  只能上传jpg/png文件，且不超过500kb
            
            
          

• 编写上传路径

  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 搭建环境

• 添加坐标

  

   

  
      com.aliyun.oss
      aliyun-sdk-oss
      3.15.0
  

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