SpringCloud Alibaba-OSS 对象存储服务
在我们项目开发中，会有许多的文件的上传下载，图片的读取等功能，而阿里巴巴在微服务框架中提供了一整套的解决方案，所以今天聊聊在微服务中使用阿里的OSS对象存储功能进行图片的上传读取。 阿里云对象存储服务（Object Storage Service，简称OSS），是阿里云对外提供的海量、安全、低成本、高可靠的云存储服务。您可以通过提供的简单的REST接口，在任何时间、任何地点、任何互联网设备上
·
在我们项目开发中，会有许多的文件的上传下载，图片的读取等功能，而阿里巴巴在微服务框架中提供了一整套的解决方案，所以今天聊聊在微服务中使用阿里的OSS对象存储功能进行图片的上传读取。
阿里云对象存储服务（Object Storage Service，简称OSS），是阿里云对外提供的海量、安全、低成本、高可靠的云存储服务。您可以通过提供的简单的REST接口，在任何时间、任何地点、任何互联网设备上进行上传和下载数据。基于OSS，您可以搭建出各种多媒体分享网站、网盘、个人和企业数据备份等基于大规模数据的服务。
开通对象存储OSS服务
开通服务啥说的，直接进入官网进行开通就行了
创建Bucket
相当于创建了空间，使用时将文件上传到这个空间中，建议一个项目创建一个Bucket
创建子账户
出于安全考虑，阿里云建议我们创建一个子账户来获取密钥等隐私信息
创建完成后，就会有账户的AccessKey ID和AccessKey Secret，通过子账户的这两个去进行编程，从而保护自己的主账户信息，创建完成后将这两个数据保存在本地电脑上，因为这个页面退出后就没了
要使用这个子账户进行编程，还得给它权限
项目整合
详细文档请参考官方文档
普通的maven项目
导入jar包
<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun-sdk-oss</artifactId>
<version>3.10.2</version>
</dependency>
测试文件上传
// Endpoint以杭州为例，其它Region请按实际情况填写。
String endpoint = "http://oss-cn-hangzhou.aliyuncs.com";
// 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录 https://ram.console.aliyun.com 创建RAM账号。
String accessKeyId = "<yourAccessKeyId>";
String accessKeySecret = "<yourAccessKeySecret>";
// 创建OSSClient实例。
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
// 创建PutObjectRequest对象。
PutObjectRequest putObjectRequest = new PutObjectRequest("<yourBucketName>", "<yourObjectName>", new File("<yourLocalFile>"));
// 如果需要上传时设置存储类型与访问权限，请参考以下示例代码。
// ObjectMetadata metadata = new ObjectMetadata();
// metadata.setHeader(OSSHeaders.OSS_STORAGE_CLASS, StorageClass.Standard.toString());
// metadata.setObjectAcl(CannedAccessControlList.Private);
// putObjectRequest.setMetadata(metadata);
// 上传文件。
ossClient.putObject(putObjectRequest);
// 关闭OSSClient。
ossClient.shutdown();
SpringCloud Alibaba OSS 对象存储
除了用原生的SDK，阿里巴巴还给我们封装了更简单的套件(传送门)，不知道是官方文档的问题还是我项目的问题，我参考它的文档，总是找不到依赖，没办法就换了个依赖，并且我的阿里配置管理版本是2.2.3，而oss的最新版才2.2.0，所以在添加依赖时需要加上版本号，或者进行降级。两个版本的兼容性，如果出错了在回来改吧，如果没改代表的项目没啥问题
1. 添加依赖
<!-- 阿里云OSS储存 -->
<dependency>
<groupId>com.alibaba.cloud</groupId>
<artifactId>spring-cloud-starter-alicloud-oss</artifactId>
<version>2.2.0.RELEASE</version>
</dependency>
<!-- 阿里云配置管理 -->
<dependencyManagement>
<dependencies>
<dependency>
<groupId>com.alibaba.cloud</groupId>
<artifactId>spring-cloud-alibaba-dependencies</artifactId>
<version>2.2.3.RELEASE</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>
2. 配置yaml
spring:
cloud:
alicloud:
access-key: xxxxxxxxxxxxxxxxxxxxxxx
secret-key: xxxxxxxxxxxxxxxxxxxxxxx
oss:
endpoint: xxxxxxxxxxxxxxxxxxxxxxx
3. 进行单元测试上传一个本地文件
@Autowired
private OSSClient client;
@Test
public void OssTest() throws FileNotFoundException {
PutObjectResult result = client.putObject("bucketName", "fileName", new FileInputStream("pathName"));
System.out.println(result);
}
接下来就进行前后端联调测试，毕竟在项目开发中不可能是后段自己去上传文件，首先说说文件的上传的两种方式
方式一：
如下图，用户将文件上传到自己的服务器，通过服务器上传到阿里云，这种方式会占用大量的IO资源
方式二：
相较于方式一，方式二是在前端进行上传的，但是在上传之前会向服务器请求一个签名，前端上传时带上这个前面，然后上传到阿里云，阿里云会去验证这个签名值是否正确，推荐使用这种方式
当然，除了上面的方式，还有一个更直接的，直接通过前端上传，不通过服务器，但是这样就把我们的密钥暴露出去了，很不安全，不建议这么做。
接下来就使用签名值进行上传文件的操作，jar包和配置参考上面的，就不在重复说了，直接划重点
/**
* 控制层接口
*/
@RestController
public class OssController {
@Autowired
private OSS client;
@Value("${spring.cloud.alicloud.oss.endpoint}")
private String endpoint;
@Value("${spring.cloud.alicloud.oss.bucket}")
private String bucket;
@Value("${spring.cloud.alicloud.access-key}")
private String accessId;
/**
* 获取签名值
*/
@GetMapping("/oss/policy")
public R policy() throws UnsupportedEncodingException {
String host = "https://" + bucket + "." + endpoint; // host的格式为 bucketname.endpoint
String dir = new SimpleDateFormat("yyyy-MM-dd").format(new Date()) + "/"; // 用户上传文件时指定的前缀。
long expireTime = 30;
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);
String postPolicy = client.generatePostPolicy(expiration, policyConds);
byte[] binaryData = postPolicy.getBytes("utf-8");
String encodedPolicy = BinaryUtil.toBase64String(binaryData);
String postSignature = client.calculatePostSignature(postPolicy);
Map<String, String> respMap = new LinkedHashMap<String, String>();
respMap.put("accessid", accessId);
respMap.put("policy", encodedPolicy);
respMap.put("signature", postSignature);
respMap.put("dir", dir);
respMap.put("host", host);
respMap.put("expire", String.valueOf(expireEndTime / 1000));
return R.ok().put("data",respMap);
}
}
后端签名接口写好了，接下来实现前端，前端使用vue+element框架，首先是一个公共的js方法获取签名值，
import http from '@/utils/httpRequest.js'
export function policy() {
return new Promise((resolve,reject)=>{
http({
url: http.adornUrl("/thirdparty/oss/policy"),
method: "get",
params: http.adornParams({})
}).then(({ data }) => {
resolve(data);
})
});
}
然后是页面组件，提供单文件上传和多文件上传两个页面组件
单文件上传
<template>
<div>
<el-upload
action="bucket域名"
:data="dataObj"
list-type="picture"
:multiple="false" :show-file-list="showFileList"
:file-list="fileList"
:before-upload="beforeUpload"
:on-remove="handleRemove"
:on-success="handleUploadSuccess"
:on-preview="handlePreview">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="fileList[0].url" alt="">
</el-dialog>
</div>
</template>
<script>
import {policy} from './policy'
import { getUUID } from '@/utils'
export default {
name: 'singleUpload',
props: {
value: String
},
computed: {
imageUrl() {
return this.value;
},
imageName() {
if (this.value != null && this.value !== '') {
return this.value.substr(this.value.lastIndexOf("/") + 1);
} else {
return null;
}
},
fileList() {
return [{
name: this.imageName,
url: this.imageUrl
}]
},
showFileList: {
get: function () {
return this.value !== null && this.value !== ''&& this.value!==undefined;
},
set: function (newValue) {
}
}
},
data() {
return {
dataObj: {
policy: '',
signature: '',
key: '',
ossaccessKeyId: '',
dir: '',
host: '',
// callback:'',
},
dialogVisible: false
};
},
methods: {
emitInput(val) {
this.$emit('input', val)
},
handleRemove(file, fileList) {
this.emitInput('');
},
handlePreview(file) {
this.dialogVisible = true;
},
beforeUpload(file) {
let _self = this;
return new Promise((resolve, reject) => {
policy().then(response => {
_self.dataObj.policy = response.data.policy;
_self.dataObj.signature = response.data.signature;
_self.dataObj.ossaccessKeyId = response.data.accessid;
_self.dataObj.key = response.data.dir + getUUID()+'_${filename}';
_self.dataObj.dir = response.data.dir;
_self.dataObj.host = response.data.host;
resolve(true)
}).catch(err => {
reject(false)
})
})
},
handleUploadSuccess(res, file) {
console.log("上传成功...")
this.showFileList = true;
this.fileList.pop();
this.fileList.push({name: file.name, url: this.dataObj.host + '/' + this.dataObj.key.replace("${filename}",file.name) });
this.emitInput(this.fileList[0].url);
}
}
}
</script>
多文件上传
<template>
<div>
<el-upload
action="bucket域名"
:data="dataObj"
list-type="picture-card"
:file-list="fileList"
:before-upload="beforeUpload"
:on-remove="handleRemove"
:on-success="handleUploadSuccess"
:on-preview="handlePreview"
:limit="maxCount"
:on-exceed="handleExceed"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt />
</el-dialog>
</div>
</template>
<script>
import { policy } from "./policy";
import { getUUID } from '@/utils'
export default {
name: "multiUpload",
props: {
//图片属性数组
value: Array,
//最大上传图片数量
maxCount: {
type: Number,
default: 30
}
},
data() {
return {
dataObj: {
policy: "",
signature: "",
key: "",
ossaccessKeyId: "",
dir: "",
host: "",
uuid: ""
},
dialogVisible: false,
dialogImageUrl: null
};
},
computed: {
fileList() {
let fileList = [];
for (let i = 0; i < this.value.length; i++) {
fileList.push({ url: this.value[i] });
}
return fileList;
}
},
mounted() {},
methods: {
emitInput(fileList) {
let value = [];
for (let i = 0; i < fileList.length; i++) {
value.push(fileList[i].url);
}
this.$emit("input", value);
},
handleRemove(file, fileList) {
this.emitInput(fileList);
},
handlePreview(file) {
this.dialogVisible = true;
this.dialogImageUrl = file.url;
},
beforeUpload(file) {
let _self = this;
return new Promise((resolve, reject) => {
policy()
.then(response => {
console.log("这是什么${filename}");
_self.dataObj.policy = response.data.policy;
_self.dataObj.signature = response.data.signature;
_self.dataObj.ossaccessKeyId = response.data.accessid;
_self.dataObj.key = response.data.dir + getUUID()+"_${filename}";
_self.dataObj.dir = response.data.dir;
_self.dataObj.host = response.data.host;
resolve(true);
})
.catch(err => {
console.log("出错了...",err)
reject(false);
});
});
},
handleUploadSuccess(res, file) {
this.fileList.push({
name: file.name,
// url: this.dataObj.host + "/" + this.dataObj.dir + "/" + file.name； 替换${filename}为真正的文件名
url: this.dataObj.host + "/" + this.dataObj.key.replace("${filename}",file.name)
});
this.emitInput(this.fileList);
},
handleExceed(files, fileList) {
this.$message({
message: "最多只能上传" + this.maxCount + "张图片",
type: "warning",
duration: 1000
});
}
}
};
</script>
配置跨域，由于上传文件时是从我们的项目上传到阿里云的服务器，所以会有跨域，需要处理跨域问题
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
1
0- 0
已为社区贡献5条内容
所有评论(0)