阿里云OSS对象存储

一、前言

阿里云对象存储OSS作用：用于存储图片、视屏、文件等数据。
参考阿里云文档地址：阿里云对象存储教程

二、总体思路

在这里插入图片描述
说明：客户端给服务端发送请求，获取policy和signature等数据（服务端提供），客户端携带这些数据和文件、图片、视屏等上传到阿里云对象存储空间。

三、后端实现

可参考阿里云对象存储教程中“服务端签名直传并设置上传回调”中的“应用服务器核心代码解析”代码块。
后端需要的工作：将policy和signature等数据传给前端。
实操代码如下：

@RestController
public class OssController {@RequestMapping("/oss/policy")protected R doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException, ClientException {// 从环境变量中获取访问凭证。运行本代码示例之前，请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。EnvironmentVariableCredentialsProvider credentialsProvider = CredentialsProviderFactory.newEnvironmentVariableCredentialsProvider();// Endpoint以华东1（杭州）为例，其他Region请按实际情况填写。String endpoint = "XXXX.aliyuncs.com";// 填写Bucket名称，例如examplebucket。String bucket = "XXXXX";// 填写Host名称，格式为https://bucketname.endpoint。String host = "https://bucketname.endpoint";// 设置上传回调URL，即回调服务器地址，用于处理应用服务器与OSS之间的通信。OSS会在文件上传完成后，把文件上传信息通过此回调URL发送给应用服务器。
//        String callbackUrl = "https://192.168.0.0:8888";// 设置上传到OSS文件的前缀，可置空此项。置空后，文件将上传至Bucket的根目录下。String format = new SimpleDateFormat("yyyy-MM-dd").format(new Date());String dir = format + "/";// 创建OSSClient实例。OSS ossClient = new OSSClientBuilder().build(endpoint, credentialsProvider);Map<String, String> respMap = null;try {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 = ossClient.generatePostPolicy(expiration, policyConds);byte[] binaryData = postPolicy.getBytes("utf-8");String accessId = credentialsProvider.getCredentials().getAccessKeyId();String encodedPolicy = BinaryUtil.toBase64String(binaryData);String postSignature = ossClient.calculatePostSignature(postPolicy);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));} catch (Exception e) {// Assert.fail(e.getMessage());System.out.println(e.getMessage());} finally {ossClient.shutdown();}return R.ok(respMap);}
}

最终返回给前端的数据为：

{"accessid":"LTAI5tBDFVar1hoq****","host":"https://post-test.oss-cn-hangzhou.aliyuncs.com","policy":"eyJleHBpcmF0aW9uIjoiMjAxNS0xMS0wNVQyMDoyMzoyM1oiLCJjxb25kaXRpb25zIjpbWyJjcb250ZW50LWxlbmd0aC1yYW5nZSIsMCwxMDQ4NTc2MDAwXSxbInN0YXJ0cy13aXRoIiwiJGtleSIsInVzZXItZGlyXC8i****","signature":"VsxOcOudx******z93CLaXPz+4s=","expire":1446727949,"dir":"user-dirs/"
}

四、前端实现

使用"el-upload"组件即可。

<el-uploadaction="https://bucketname.endpoint":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>

调用后端写的上述API接口获取policy和signature等数据。

:before-upload=“beforeUpload”------在上传之前获取后端的签名等数据

beforeUpload(file) {let _self = this;return new Promise((resolve, reject) => {policy().then(response => {console.log("上传之前：",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;console.log("相应数据：",_self.dataObj);resolve(true)}).catch(err => {reject(false)})})}