阿里云——OSS的创建和使用

当项目为用户提供一个上传图片的功能的时候，为了减少图片占用本地的存储空间一般需要将图片上传到云端中，阿里云的OSS提供了该功能

1.注册阿里云账号https://oss.console.aliyun.com
根据步骤注册账号，并选择开通对象储存OSS服务

2.创建Bucket

3.配置跨域（这样java后台就能使用代码对它进行访问）

4.创建AccessKey 推荐使用子用户这样安全一点

5.JAVA后台编写代码使用OSS作为图片存储地址

5.1导入阿里云OSS的依赖包

        <!--导入阿里云的oss依赖包--><dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>3.10.2</version></dependency>

5.1编写一个controller用来提供图片上传的接口,并返回签名及OSS相关参数

@RestController
public class AlicloudOSSController {//注入配置类@Autowiredprivate AlicloudOSSProperties properties;@GetMapping("/oss/sign")public AjaxResult ossSign(){// host的格式为 bucketname.endpoint  上传的文件的服务器的名字String host = "https://" + properties.getBucketName() + "." + properties.getEndpoint();// 用户上传文件时指定的前缀。  就是一个文件的名字String dir = "zeng";// 创建OSSClient实例。OSS ossClient = null;try {//策略过期时间long expireTime = 60;long expireEndTime = System.currentTimeMillis() + expireTime * 1000;Date expiration = new Date(expireEndTime);// PostObject请求最大可支持的文件大小为5 GB，即CONTENT_LENGTH_RANGE为5*1024*1024*1024。PolicyConditions policyConds = new PolicyConditions();policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);// 创建OSSClient实例。ossClient = new OSSClientBuilder().build(properties.getEndpoint(), properties.getAccessKey(), properties.getSecretKey());String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);byte[] binaryData = postPolicy.getBytes("utf-8");String encodedPolicy = BinaryUtil.toBase64String(binaryData);//签名String postSignature = ossClient.calculatePostSignature(postPolicy);//返回签名及OSS相关参数Map<String, String> respMap = new LinkedHashMap<String, String>();respMap.put("accessid", properties.getAccessKey());respMap.put("policy", encodedPolicy);respMap.put("signature", postSignature);respMap.put("dir", dir);respMap.put("host", host);respMap.put("expire", String.valueOf(expireEndTime / 1000));return AjaxResult.me().setResultObj(respMap);} catch (Exception e) {e.printStackTrace();System.out.println(e.getMessage());} finally {if(ossClient != null){ossClient.shutdown();}}return null;}}

5.2将需要的参数放入到application配置文件中（方便修改，因为我使用了微服务）

file:alicloud:bucket-name: xxxxxx #上传空间bucket的名字access-key: xxxxxxxxxxxxxxxxx #你的key  就是AccessKey IDsecret-key: xxxxxxxxxxxxxxxxxxxxxxx #你的秘钥  就是AccessKey secretendpoint: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  #地域节点

5.3该配置类会在配置文件中扫描到指定的配置并将属性作为字段

@Component  //交给spring管理
@ConfigurationProperties(value = "file.alicloud")  //从配置文件中的value中获取到对应的字段信息
@Data
public class AlicloudOSSProperties {private String bucketName;private String accessKey;private String secretKey;private String endpoint;}

6.前端上传图片

6.1我使用的是Element-ui的组件

<el-form-item prop="logo" label="公司Logo"><!--<el-input type="text" v-model="employee.logo" auto-complete="off" placeholder="请输入logo！"></el-input>--><el-uploadclass="upload-demo"action="http://bucket的名字.地域节点名字":data="uploadData":before-upload="beforeUpload":on-success="handleSuccess":file-list="fileList"list-type="picture"><el-button size="small" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div></el-upload></el-form-item>

6.2图片通过action路径上传之前需要从后台获取到签名及OSS相关参数

getUUID() {var s = [];var hexDigits = "0123456789abcdef";for (var i = 0; i < 36; i++) {s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);}s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01s[8] = s[13] = s[18] = s[23] = "-";var uuid = s.join("");return uuid;}
async beforeUpload(){await this.$http.get("/file/oss/sign").then(response=>{//设置相关的参数var resultObj = response.data.resultObj;this.uploadData.policy = resultObj.policy;this.uploadData.signature = resultObj.signature;this.uploadData.ossaccessKeyId = resultObj.accessid;//上传的文件名，使用UUID处理一下this.uploadData.key = resultObj.dir + '/'+this.getUUID()+'_${filename}';this.uploadData.dir = resultObj.dir;this.uploadData.host = resultObj.host;});},

6.3使用一个对象接收数据

//提交到OSS的参数uploadData: {policy: '',signature: '',key: '',ossaccessKeyId: '',dir: '',host: ''}

6.4上传成功或者失败后返回的信息

handleSuccess(res, file) {//this.fileList.pop();//上传的完整的文件地址var urlPath = this.uploadData.host + '/' + this.uploadData.key.replace("${filename}",file.name) ;this.employee.logo = urlPath;this.$message({message: '上传成功，图片地址：'+this.employee.logo, type: 'success' });}

阿里云——OSS的创建和使用相关推荐

php tp5上传图片到阿里云OSS
1.登录阿里云OSS管理控制台创建Bucket (写入名称,这个我已经创建过了,我接下来会用到,注意Endpoint,后面会用到) 为了方便管理图片,可以在Bucket多建目录进行存放: 2.在tp5 ...
阿里云OSS配合PicGo搭建图床
本文原载于我的博客:https://www.seekingmini.top/archives/阿里云oss配合picgo搭建图床写在前面刚搭建好博客,就发现了大问题--我想在博客中插入图片,图片链 ...
解决七牛云链接失效以及批量下载图片并迁移阿里云 OSS
起因七牛云对测试域名进行回收,而我博文中图片用的链接仍然是测试域名的链接,因此导致部分链接失效,浏览器返回如下错误: {"error":"no such domain& ...
尚医通项目124-149：微信登录以及阿里云OSS的使用
开始时间:2022-06-17 课程链接:尚医通项目微信登录 OAuth2 开放系统间授权照片拥有者想要在云冲印服务上打印照片,云冲印服务需要访问云存储服务上的资源方式一:用户名密码复制:将受保 ...
阿里云OSS文件上传下载，拿来即用
什么是OSS 我们可以理解为就是一个资源服务器,在这之前我也尝试过Nginx当静态资源服务器,但效果比较一般,为什么选择阿里云OSS,只是因为最近刚好公司用到了,所以就接入了,还有其他的比如七牛云,腾 ...
阿里云 OSS+CDN
https://promotion.aliyun.com/ntms/ossedu2.html https://www.aliyun.com/act/aliyun/ossdoc.html 对象存储(Ob ...
使用阿里云OSS上传文件
本文介绍如何利用Java API操作阿里云OSS对象存储. 1.控制台操作首先介绍一下阿里云OSS对象存储的一些基本概念. 1.1 进入对象存储界面登录阿里云账号,进入对象存储界面,如图所示. 进 ...
oss客户端工具_阿里云服务器ECS上使用ossfs工具挂载阿里云OSS存储
介绍:阿里云对象存储服务(Object Storage Service,简称OSS)可以提供基于网络的数据存取服务.使用OSS,可以通过网络随时存储和调用包括文本.图片.音频和视频等在内的各种非结构化 ...
maven配置阿里云_阿里云OSS PicGo 配置图床教程超详细
阿里云OSS和PicGo配置图床教程超详细废话不多说,直接开始购买阿里云OSS服务登录阿里云打开侧边栏,选择对象存储OSS,如下图: 对象存储界面右部选择创建Bucket,如下图所示: 之后 ...

阿里云——OSS的创建和使用

阿里云——OSS的创建和使用相关推荐

最新文章

热门文章