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

妖狐艹你老母 2024-04-06 09:53 66阅读 0赞

## 文章目录 ##

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服务 ###

![a9382f50620241dcb5e584691a1bf7e4.png][]

![04c4eb81e66e45f6a969a334aaac04e0.png][]

![bc799d2518494aa2bf5b6e394bad49ec.png][]

### 1.2 搭建OSS环境 ###

#### 1.2.1 创建Bucket存储空间 ####

*  选择 Bucket列表，进行Bucket创建![6b3ff4d38edb4e53888315403c59609d.png][]

*  选择：标准存储、关闭冗余、不开通版本控制、公共读、无加密、不开通日志、不开通备份

![b6ffaaf7932a4507b270d67586fb28b4.png][]

![87e40badc09a43518d3871f83285ce21.png][]

#### 1.2.2 创建文件夹上传图片 ####

*  创建文件夹![3cb1dd5205dd4ae088256b41f1be0742.png][]

*  上传图片

![c533a411c1024887a692ddd550bd37ba.png][]

#### 1.2.3 RAM 访问控制 ####

*  在头像中，点击“AccessKey管理”进行RAM设置![94f815e8d8874d5eadf2d51c86b5acae.png][]

*  安全提醒，使用`子用户`![7023730763594c37961681f668a05b26.png][]
 *  创建用户组：
    
    ![8649e0a12c0c4a8daa458eeaf6b66724.png][]
    
    ![3504c73f8c444eeeb9932141b6bb8cf5.png][]

*  添加用户![a2a098ec0d7443b3b7cd681e6b348b60.png][]
 *  添加用户到用户组
    
    ![90fa2b9ccb454f18b1ab29ddc366c44f.png][]
 *  设置权限
    
    ![96a1ed02fff44fabad9f74a7d46a884c.png][]

*  获取子用户AccessKeyId,AccessKeySecret
    
    ![3317a2dd512a4aa7b8643073a511ee95.png][]

### 1.3 快速入门 ###

#### 1.3.1 下载SDK ####

*  在“常用入口”中，点击“SDK下载”![59963acb6b214100998e025a5e420fd5.png][]

*  点击“Java SDK”

![268f4c18852143e19035464f8cf63b41.png][]

#### 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 创建存储空间\[可选\] ####

*  [快速入门 - 对象存储 OSS - 阿里云][- _ OSS -]

![51dbdec4fb4b482e889f9b30e16fd8f5.png][]

*  例如：

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

![4c9ca8a945ed41d98ec356bb6b603a5e.png][]

#### 1.3.3 上传图片 ####

*  参考代码位置：

![f420fa0595fd41f68412710e7a56b14f.png][]

*  例如：

@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 需求 ###

![46aa60eeebe942238fcaf68f7423846a.png][]

### 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 显示已有封面 ####

*  提供变量
    
    ![fe3d1892be4b486ca838ebe931311c66.png][]
 *  将变量上传组件绑定
    
    ![23da2a54f94445fa98f12aca8a9e5194.png][]
 *  查询详情时，将封面图片路径添加变量中
    
    ![c0ec7e09cfc14b8aa633eff5f00ca24e.png][]

### 2.3 后端测试数据 ###

![7bbaa617893a49ceaac73ad41240ba14.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);
        }

### 2.4 后端实现 ###

#### 2.4.1 搭建环境 ####

*  添加坐标
    
    ![fbf7d1743ae942dd98910144f15728f6.png][]
    
        <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
    
    ![12edc7a35ae144f9a9c71f38b08fb5c8.png][]
 *  配置类
    
        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 名称
        }
        
    
    ![eaa1b91e0c3041da8df139d706951d81.png][]

#### 2.4.2 上传工具类 ####

![81b182ae0ace4b5a9b5f4516bf81b0e0.png][]

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 上传功能 ####

![34ec67b07b5846c2bad804a4bbf0084d.png][]

*  注入工具
    
    ![05dbbe00131441b7b76ad941705741e9.png][]
 *  调用工具
    
        @Resource
            private OssUtils ossUtils;
        
            @PostMapping("/avatar/upload")
            public BaseResult avatarUpload(MultipartFile file) {
        
                String url = ossUtils.upload(file);
        
                return BaseResult.ok("上传成功", url);
            }

[a9382f50620241dcb5e584691a1bf7e4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/a4c70c8cf3d04a4ebcdcc6ee5338f73b.png
[04c4eb81e66e45f6a969a334aaac04e0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/399c2b123a6e4890b241c2136e1f0473.png
[bc799d2518494aa2bf5b6e394bad49ec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/317d8426469b4ba9ace6c7117819a063.png
[6b3ff4d38edb4e53888315403c59609d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/cecc8d5969594506b0528790ece21053.png
[b6ffaaf7932a4507b270d67586fb28b4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/da2b5abf39d04e0eb5d5ef05e1cb427b.png
[87e40badc09a43518d3871f83285ce21.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/8f1329460ab84ec08884039aaccba4e5.png
[3cb1dd5205dd4ae088256b41f1be0742.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/168c401c8b0045b986670a23f88cbcbc.png
[c533a411c1024887a692ddd550bd37ba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/a9e63a2181db441aa185f36c4a5e636e.png
[94f815e8d8874d5eadf2d51c86b5acae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/cee484596f414dadb97c9cbe9a0f74d0.png
[7023730763594c37961681f668a05b26.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/f17a78cfc3fe4ba3af077b59eecb26d7.png
[8649e0a12c0c4a8daa458eeaf6b66724.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/da0fc6a6620a4738ad67ee8ec90b829e.png
[3504c73f8c444eeeb9932141b6bb8cf5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/d1769e21c98d467bbc1fdd7d1adb5201.png
[a2a098ec0d7443b3b7cd681e6b348b60.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/2157c289c42d49f5ab2f3596286e9e1d.png
[90fa2b9ccb454f18b1ab29ddc366c44f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/b3da46ba4e5b480c86949eb514d9b8d4.png
[96a1ed02fff44fabad9f74a7d46a884c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/00bd84166da542e5b24fcb1e86f6c8ce.png
[3317a2dd512a4aa7b8643073a511ee95.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/501c6bcfa77842d18e5fcf070e011b44.png
[59963acb6b214100998e025a5e420fd5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/27cccec98d7e406abc8d2e49c04916df.png
[268f4c18852143e19035464f8cf63b41.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/7add3e94bc1440b49b501c63e8278c71.png
[- _ OSS -]: https://help.aliyun.com/document_detail/32011.html
[51dbdec4fb4b482e889f9b30e16fd8f5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/3ee7fef74127413f9dcecc376b50a30a.png
[4c9ca8a945ed41d98ec356bb6b603a5e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/5ddad4fc4e714c169fde84181bf33018.png
[f420fa0595fd41f68412710e7a56b14f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/ac1984a948dd496f93a139a194f6470f.png
[46aa60eeebe942238fcaf68f7423846a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/9e7c0d6d86e8402d9b5da7aa0343ebdf.png
[fe3d1892be4b486ca838ebe931311c66.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/b51a59f5710f4c7a840115a4cb2653c3.png
[23da2a54f94445fa98f12aca8a9e5194.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/abe05d38c92843fabad70a811268e6c9.png
[c0ec7e09cfc14b8aa633eff5f00ca24e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/6596004fbfbe48c394c5adb9df6db53f.png
[7bbaa617893a49ceaac73ad41240ba14.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/33a7a2725fa34bd1a4bcb9b1010012e0.png
[fbf7d1743ae942dd98910144f15728f6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/1848c2580b7a4e88a7d70b57116bb2e6.png
[12edc7a35ae144f9a9c71f38b08fb5c8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/adf6ae228bea41bf8bf0f85e0e8a3a3b.png
[eaa1b91e0c3041da8df139d706951d81.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/7e83b913200d49feb41ef7bee414db42.png
[81b182ae0ace4b5a9b5f4516bf81b0e0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/b9dfff13e73d473ba8bf0c6ea6b37eee.png
[34ec67b07b5846c2bad804a4bbf0084d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/16062e4d20be4644852d76325728cce8.png
[05dbbe00131441b7b76ad941705741e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/30856b79a1f34ad693af399427b032fb.png