1.3 快速入门
1.3.1 下载SDK
- 在“常用入口”中，点击“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 创建存储空间[可选]
例如：packagecom.czxy; importcom.aliyun.oss.OSS; importcom.aliyun.oss.OSSClientBuilder; importorg.junit.Test; /*** @author 桐叔* @email liangtong@itcast.cn*/publicclassTestOss { publicvoidtestCreateBucket() { // Endpoint以杭州为例，其它Region请按实际情况填写。Stringendpoint="oss-cn-shanghai.aliyuncs.com"; // 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。StringaccessKeyId="这里是账号"; StringaccessKeySecret="这里是密码"; StringbucketName="czxy-lt-01"; // 创建OSSClient实例。OSSossClient=newOSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret); // 创建存储空间。ossClient.createBucket(bucketName); // 关闭OSSClient。ossClient.shutdown(); } }
1.3.3 上传图片
- 参考代码位置：
- 例如：
publicvoidtestUpload() throwsFileNotFoundException { // yourEndpoint填写Bucket所在地域对应的Endpoint。以华东1（杭州）为例，Endpoint填写为https://oss-cn-hangzhou.aliyuncs.com。Stringendpoint="oss-cn-shanghai.aliyuncs.com"; // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。StringaccessKeyId="这是账号"; StringaccessKeySecret="这是密码"; // 创建OSSClient实例。OSSossClient=newOSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret); Stringpath="avatar/"+System.currentTimeMillis() +".png"; // 数据流InputStreaminputStream=newFileInputStream("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.pngStringurl="https://czxy-lt.oss-cn-shanghai.aliyuncs.com/"+path; System.out.println(url); }
2. 课程管理--课程封面
2.1 需求
2.2 前端实现
2.2.1 上传成功处理
- 添加上传组件和头像组件
<el-form-itemlabel="课程封面"><el-uploadclass="upload-demo" :action="updateUrl"list-type="picture-card" :limit="1" :on-exceed="handleExceed" :on-success="avatarUploadSuccess"><el-buttonsize="small"type="primary">点击上传</el-button><divslot="tip"class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div></el-upload><el-avatarshape="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 }
