阿里云OSS文件上传，后台签名方案

时序图如上

上传回调过程是在后台封装好代码，将callback作为参数在获取签名的时候返回给前端，前端再去直接调用host进行文件直传，此时阿里云会根据是否有回调地址进行调用此接口地址；针对此回调地址可以进行具体业务处理；

大家可以先去看官方文档，基本数据在文档中都有；

概述 - 对象存储 OSS - 阿里云

踩坑指南：

回调地址未生效
上传图片无法预览只能下载
回调后处理时无法获取参数
如何处理可用或者是防盗链接地址

回调地址需要放开鉴权，具体看你服务端采用哪种鉴权方式；

接下来从后台提供两个接口，一个获取签名接口需要用户登录后使用，一个回调接口；

    /*** 获取签名接口* @return*/public OssPolicyResultVo getPolicy() {OssPolicyResultVo result = new OssPolicyResultVo();// 存储目录String dir = ossConfigVo.getImageFilePathPrefix();// 签名有效期long expireEndTime = System.currentTimeMillis() + ossConfigVo.getFileExpireTime() * 1000;Date expiration = new Date(expireEndTime);// 回调参数OssCallbackParam callback = new OssCallbackParam();callback.setCallbackUrl(ossConfigVo.getAliyunOSSCallBack());callback.setCallbackBody("filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}");callback.setCallbackBodyType("application/x-www-form-urlencoded");// 提交节点String action = "https:/aaaaaa.oss-cn-shenzhen.aliyuncs.com";try {PolicyConditions policyConds = new PolicyConditions();policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, maxSize);policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);byte[] binaryData = postPolicy.getBytes(StandardCharsets.UTF_8);String policy = BinaryUtil.toBase64String(binaryData);String signature = ossClient.calculatePostSignature(postPolicy);String callbackData = BinaryUtil.toBase64String(JSONUtil.parse(callback).toString().getBytes(StandardCharsets.UTF_8));// 返回结果result.setAccessKeyId(ossClient.getCredentialsProvider().getCredentials().getAccessKeyId());result.setPolicy(policy);result.setSignature(signature);result.setDir(dir);result.setCallback(callbackData);result.setHost(action);} catch (Exception e) {e.printStackTrace();log.error("签名生成失败", e);}finally {ossClient.shutdown();}return result;}

回调参数封装成一个对象再进行Base64编码转化

// 回调参数
OssCallbackParam callback = new OssCallbackParam();
callback.setCallbackUrl(ossConfigVo.getAliyunOSSCallBack());
callback.setCallbackBody("filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}");
callback.setCallbackBodyType("application/x-www-form-urlencoded");

其中的callbody可以进行自定义参数；

回调接口如下：可以进行自定义业务处理

public OssCallbackResultVo callback(HttpServletRequest request) {log.info(String.valueOf(request.getParameterMap()));OssCallbackResultVo result= new OssCallbackResultVo();String filename = Optional.ofNullable(request.getParameter("filename")).orElse("");String ossUrl = aliyunOSS.getOSSUrl(ossClient, filename, fileNotExpireTime);if (StringUtils.isNotBlank(ossUrl)) {String substring = ossUrl.substring(45);ossUrl = staticCom + substring;}result.setFilename(filename);result.setUrl(ossUrl);result.setSize(request.getParameter("size"));result.setMimeType(request.getParameter("mimeType"));result.setWidth(request.getParameter("width"));result.setHeight(request.getParameter("height"));// @TODO 落库saveFileInfo(result);return result;}

其中返回的Url此处进行了替换，解决了可用url地址替换问题和图片文件无法预览的问题；

此处需要进行二级域名解析映射到你OSS的域名

操作步骤：

阿里云控制台进入DNS域名解析列表，使用一个二级域名解析到你使用的OSS Bucket 域名上

最后在 cmd 上ping static.yourweb.com 看是否映射到 aaa..oss-cn-shenzhen.aliyuncs.com即可

在回调处替换文件路径的时候也是使用static.yourweb.com此域名替换OSS Bucket 域名即可实现预览功能；

后台接口提供完成，接下来就是前端vue实现，基本流程很简单，调用获取签名接口再进行上传文件，最后根据上传返回参数判断是否成功即可！

uploadOSSImg(file) {getOSSSign().then((res) => {console.log(res.code);console.log(res.code === 0);if (res.code === 0) {console.log("进入上传")let picName = this.randomString(10) + this.getSuffix(file.file.name)let keyValue = res.data.dir + picNameconsole.log(picName)console.log(keyValue)console.log(res.data);//注意formData里append添加的键的大小写let formData = new FormData()formData.append('name', file.file.name) // 文件名称formData.append('key', keyValue) // 存储在oss的文件路径formData.append('OSSAccessKeyId', res.data.accessKeyId) // //accessKeyIdformData.append('policy', res.data.policy) // policyformData.append('Signature', res.data.signature) //签名formData.append('success_action_status', 200)formData.append('callback', res.data.callback)formData.append('file', file.file, file.file.name) // 如果是base64文件，那么直接把base64字符串转成blob对象进行上传即可this.progressFlag = truereturn new Promise((resolve, reject) => {axios.post(res.data.host, formData, {headers: {'Content-Type': 'multipart/form-data'},withCredentials: false,// 图片上传进度onUploadProgress: (progressEvent) => {this.progressPercent = Math.floor((progressEvent.loaded * 100) / progressEvent.total)}}).then((rep) => {if (rep.status === 200) {this.imageUrl = res.data.host + '/' + keyValuethis.$emit('uploadSuccess', this.imageUrl)console.log('Uploaded successfully', rep)if (this.progressPercent >= 100) {this.progressFlag = falsesetTimeout(() => {this.progressPercent = 0},1000)}}resolve(rep)}).catch((err) => {reject(err)})})}}).catch((err) => {console.log(err)})},handleRemove(file) {this.$refs.upload.abort()this.$message({message: '成功移除' + file.name,type: 'success'})},handleAvatarSuccess(res, file) {this.imageUrl = URL.createObjectURL(file.raw)}}

当然参数可以自定义去封装！

阿里云OSS文件上传，后台签名方案相关推荐

SpringBoot整合阿里云OSS文件上传、下载、查看、删除
SpringBoot整合阿里云OSS文件上传.下载.查看.删除该项目源码地址:https://github.com/ggb2312/springboot-integration-examples ( ...
解决阿里云oss文件上传部分MP4格式视频文件上传导致上传崩溃问题
解决阿里云oss文件上传部分MP4格式视频文件上传导致上传崩溃问题问题描述 java程序,使用阿里云oss文件上传服务,在测试时偶然发现,我用苹果手机开启高清进行摄像,将原图通过qq传到电脑上,在电 ...
阿里云oss文件上传工具类
阿里云oss文件上传工具类阿里云oss 阿里云oss 导入文件阿里云oss的maven依赖 <dependency><groupId& ...
Java中阿里云OSS文件上传工具类
阿里云OSS文件上传下载工具类前言: 本质上就是获取配置文件信息,然后注入bean,调用sdk中提供的增删改方法: 为了避免同名文件会替换,用了hutool中唯一id生成+文件名做拼接导入依赖:→ ...
阿里云OSS文件上传下载，拿来即用
什么是OSS 我们可以理解为就是一个资源服务器,在这之前我也尝试过Nginx当静态资源服务器,但效果比较一般,为什么选择阿里云OSS,只是因为最近刚好公司用到了,所以就接入了,还有其他的比如七牛云,腾 ...
Java学习踩坑：阿里云OSS文件上传前端通过路径获取报403错误
错误还原:我在做OSS文件上传头像时,发现头像的图片文件可以上传成功,也可以返回文件的路径.但是前端在拿着后端返回的文件图片路径去访问这个图片时,Response中的错误码为403.找了一下网上的资料 ...
阿里云oss文件上传（简单上传、服务端签名后直传）
前置: 自行开通阿里oss服务: https://www.aliyun.com/product/oss?spm=a2c4g.11174283.J_8058803260.125.d9387da2TjNf ...
php阿里云oss文件上传
php的文件上传文件上传 php的文件上传放在了$_FILES数组里,单文件和多文件上传的区别在于$_FILES['userfile']['name']是否为数组, 不熟悉的可以读一下官方文档单文 ...
python实现阿里云OSS文件上传下载
一前言最近使用到阿里云的产品OSS,用于临时存储线上抽取的数据,然后起本地化的流程去OSS拉回本地,进行自动化数据验证.OSS提供了web方式的管理控制台,命令行管理工具,提供了主流的SDK支持, ...
阿里云OSS文件上传下载工具类
引入依赖 <dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss ...

阿里云OSS文件上传，后台签名方案

阿里云OSS文件上传，后台签名方案相关推荐

最新文章

热门文章