阿里云对象存储oss的使用和解决对象存储oss跨域问题
默认你是开通了,开通很容易,一点即可
1、首先创建Bucket
2、根据自己的需求选择,如果不懂直接按我的这个来
Bucker名称是唯一的,自己随便取一个
地域:选择离自己最近的
存储类型:标准存储
存储冗余类型:本地
读写权限:公共
其余的全部默认不用动
3、创建之后,点击概览,滑到最下面,外网访问这一行
4、前端代码:
1 | beforeUpload:选择图片之后会自动调用这个方法,获取数据相当于钥匙,然后会携带钥匙和文件一起发送给阿里云(action就是请求地址)。< br >这个方法是里面是异步操作,上传图片之前会调用你写的请求获取后端钥匙(dataObj),然后携带钥匙一起发往阿里云。 |
1 | handleUploadSuccess:图片上传成功回调< br >< br > |
1 2 3 4 5 6 | < el-upload :data="dataObj" action="http://外网访问的Bucket域名" multiple accept="jpg,jpeg,png,PNG" list-type="picture-card" :on-success="handleUploadSuccess()" :before-upload="beforeUpload" :show-file-list="false"> <!-- <img style="width: 9.3rem;height: 9.3rem;" v-if="goodsForm.defaultImg" :src="goodsForm.defaultImg" class="avatar"> --> < i v-if="!goodsForm.defaultImg" class="el-icon-plus" /> </ el-upload > |
5、然后获取AccessKey ID,这个很重要,千万不能泄露
鼠标移动到头像处,点击AccessKey管理
使用子用户
然后点创建用户,选择open api调用
6、后端代码,基本上是固定的
pom.xml
1 2 3 4 5 6 | <!--OSS对象存储--> <dependency> <groupId>com.alibaba.cloud</groupId> <artifactId>aliyun-oss-spring-boot-starter</artifactId> <!-- <version> 3.8 . 0 </version>--> </dependency> |
controler
1 2 3 4 5 6 7 | @Autowired private OssUtils ossUtils; @GetMapping ( "/api/cloud-oss/oss/policy" ) public Map<String,String> oss(){ return ossUtils.getUploadPolicy(); } |
utils
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | @Component @Slf4j public class OssUtil { @Autowired private OSS ossClient; @Value ( "${alibaba.cloud.oss.endpoint}" ) private String endpoint; @Value ( "${alibaba.cloud.access-key}" ) private String accessKeyId; @Value ( "${alibaba.cloud.secret-key}" ) private String accessKeySecret; @Value ( "${alibaba.cloud.bucket}" ) private String bucket; public Map<String, String> getUploadPolicy() { Map<String, String> respMap = new LinkedHashMap<>();; // https://vivi-gulimall.oss-cn-hangzhou.aliyuncs.com String host = "https://" + bucket + "." + endpoint; // host的格式为 bucketname.endpoint // callbackUrl为 上传回调服务器的URL,请将下面的IP和Port配置为您自己的真实信息。 // String callbackUrl = "http://88.88.88.88:8888"; // 每一天产生一个文件夹 String dir = LocalDate.now().toString() + "/" ; // 用户上传文件时指定的前缀。 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 encodedPolicy = BinaryUtil.toBase64String(binaryData); String postSignature = ossClient.calculatePostSignature(postPolicy); respMap.put( "accessid" , accessKeyId); respMap.put( "policy" , encodedPolicy); respMap.put( "signature" , postSignature); respMap.put( "dir" , dir); respMap.put( "host" , host); respMap.put( "expire" , String.valueOf(expireEndTime / 1000 )); // respMap.put("expire", formatISO8601Date(expiration)); } catch (Exception e) { // Assert.fail(e.getMessage()); log.error( "获取aliyun oss文件上传签名失败:{}" , e.getMessage()); throw new BizException(ResultCode.OSS_FAILED_TO_GETPOLICY); } finally { ossClient.shutdown(); } return respMap; } } |
到了这里基本上就已经可以使用了
最后有可能会出现跨域问题,报错403
解决方法:点击数据安全 跨域设置
添加跨域规则,来源* 代表所有 ,允许post请求 ,允许headers *
成功
如果发现是项目启动之后报错,OssClient无法自动装配或者包无法导入,请看Ossclient无法自动装配和包aliyun-oss-spring-boot-starter导入错误 - 小-伙计 - 博客园 (cnblogs.com)
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 因为Apifox不支持离线,我果断选择了Apipost!
· 通过 API 将Deepseek响应流式内容输出到前端