阿里云图片上传返回地址有blob格式问题处理实录

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,内容安全 1000 次 1年
对象存储 OSS,恶意文件检测 1000次 1年
简介: 阿里云OSS上传图片功能很多人可能对实现过,正常情况下会返回https开头的图片地址.

1.问题描述以及原因分析


   阿里云OSS上传图片功能很多人可能对实现过,正常情况下会返回https开头的图片地址.但是今天业务系统中运营人员反应上传的合同详情页面打开异常,看过服务端的日志之后发现用户上传的图片地址带有blob,线上返回异常图片地址如下:

af9a283072cb25dd7b797683abcf42fa_2ab1c76e0ee04d2bb7ff590403a24ee7.png

   造成这种的现象的原因就是服务端进行多个图片截取时处理异常,导致页面打开失败!现在说下问题处理方式.


2.处理方式说明


   咨询过官方客服,反馈说正常情况下oss上传图片不会存在返回类似于blob:XXX格式,提供的处理方式就是判断图片上传是否成功.这里阿里云OSS图片上传使用的是服务端sdk实现,先看下原始的图片上传逻辑:

public String uploadImg(MultipartFile[] multipartFiles) {
        // 返回多张图片地址
        String imgs="";
        for (int i = 0; i < multipartFiles.length; i++) {
            try {
                String fileName = System.currentTimeMillis()+"_"+multipartFiles[i].getOriginalFilename();
                String pathKey=filePath + fileName;
                // bucketName表示阿里云OSS存储的配置信息:bucketName
                ossClient.putObject("bucketName", pathKey, new ByteArrayInputStream(multipartFiles[i].getBytes()));
                    if(i < multipartFiles.length-1){
                        imgs = imgs + aliyunConfig.getUrlPrefix() + pathKey+",";
                    }else {
                        imgs = imgs + aliyunConfig.getUrlPrefix() + pathKey;
                    }
                }
            } catch (Exception e) {
                log.error("图片上传失败:{}",e.getMessage());
                throw new Exception("图片上传失败:"+e.getMessage());
            }
        }
        return imgs;
    }


   关于图片地址是直接进行字符串拼接,没有和阿里云OSS服务进行请求交互,这里的意思可以理解为应用服务端接口请求完成,并不代表阿里云OSS服务端文件存储完成(客户端存在的情况可能是五花八门,无法全部复现),最稳妥的处理方式是请求一下阿里云OSS服务端判断已上传成功的文件与原始的文件是否相同,如果相同则认为是一次有效的上传操作.现在提供两种处理方式,可以根据情况进行选择(两种方式均展示核心上传逻辑).


2.1根据上传返回响应状态

// bucketName表示阿里云OSS存储的配置信息:bucketName
PutObjectResult putObjectResult = ossClient.putObject("bucketName", pathKey, new ByteArrayInputStream(multipartFiles[i].getBytes()));
if(putObjectResult.getResponse().getStatusCode()==200){
    if(i < multipartFiles.length-1){
        imgs = imgs + aliyunConfig.getUrlPrefix() + pathKey+",";
    }else {
        imgs = imgs + aliyunConfig.getUrlPrefix() + pathKey;
    }
}


注意sdk版本需要升级到:3.15.0,依赖如下:

<dependency>
    <groupId>com.aliyun.oss</groupId>
    <artifactId>aliyun-sdk-oss</artifactId>
    <version>3.15.0</version>
  </dependency>


2.2调用GetObject接口获取下文件的大小

// bucketName表示阿里云OSS存储的配置信息:bucketName
ossClient.putObject(aliyunConfig.getBucketName(), pathKey, new ByteArrayInputStream(multipartFiles[i].getBytes()));
                ObjectMetadata objectMetadata = ossClient.getObject(aliyunConfig.getBucketName(), pathKey).getObjectMetadata();
                // 判断已上传文件大小与原始上传文件大小是否相同
                if (objectMetadata.getContentLength() == multipartFiles[i].getSize()) {
                    if(i < multipartFiles.length-1){
                        imgs = imgs + aliyunConfig.getUrlPrefix() + pathKey+",";
                    }else {
                        imgs = imgs + aliyunConfig.getUrlPrefix() + pathKey;
                    }
                }


   以上是对于此问题的两种处理方式,这次处理之后经过一段时间测试暂时没有反馈异常的图片上传问题,如果感觉对你有帮助欢迎评论区留言或是点赞收藏!


相关实践学习
通义万相文本绘图与人像美化
本解决方案展示了如何利用自研的通义万相AIGC技术在Web服务中实现先进的图像生成。
相关文章
第7节:Vue3 动态绑定多个属性
第7节:Vue3 动态绑定多个属性
446 0
|
缓存 算法 网络协议
公众号JSSDK获取signature签名,史上最全,没有之一
公众号JSSDK获取signature签名,史上最全,没有之一
662 0
|
SQL Java Go
seata-golang 接入指南
seata-golang 是一个分布式事务框架,实现了 AT 模式和 TCC 模式,AT 模式相较 TCC 模式对代码的入侵性更小、需要开发的接口更少;但 AT 模式对事务操作的数据持有全局锁,从这点来说,TCC 模式性能更好。
seata-golang 接入指南
|
11月前
|
数据安全/隐私保护
Pyside6实操笔记(一):系统页面跳转
本文介绍了如何使用Pyside6实现系统页面跳转,包括登录界面跳转到注册界面的代码实现。关键步骤包括创建空窗口、编写跳转逻辑,并提供了完整的登录和注册窗口代码。此外,还涉及了国际化、主题色设置和窗口特效等高级功能。
477 0
|
存储 对象存储
【阿里云OSS】You have no right to access this object because of bucket acl.
【阿里云OSS】You have no right to access this object because of bucket acl.
17909 1
【阿里云OSS】You have no right to access this object because of bucket acl.
|
JSON 数据格式
axios.post请求出错:Request header field content-type is not allowed by Access-Control-Allow-Headers in……
axios.post请求出错:Request header field content-type is not allowed by Access-Control-Allow-Headers in……
|
Ubuntu Linux Docker
弃用Docker Desktop:在WSL2中玩转Docker之Docker Engine 部署与WSL入门
弃用Docker Desktop:在WSL2中玩转Docker之Docker Engine 部署与WSL入门
18926 4
|
JavaScript 前端开发
Vue3里如何上传图片以及图片回显
Vue3里如何上传图片以及图片回显
484 0
|
前端开发 JavaScript 开发者
三大微前端框架,谁是你的理想型?
【7月更文挑战第4天】React、Vue和Angular在微前端领域表现出色,各具优势。React以其组件化和高效生态受青睐,Vue以简洁和渐进式设计赢得人心,Angular则凭借全面功能和类型系统脱颖而出。选择框架需考虑项目需求、团队技能及技术栈兼容性。例如,React组件可通过虚拟DOM高效管理状态,Vue组件易于集成,而Angular组件利用模块化和依赖注入支持独立部署,但学习成本较高。每个框架的组件示例展示了其在微前端中的应用潜力。最终选择无定论,关键在于适应性。
1233 2