准备：在阿里云官网购买OSS云存储服务

具体我这里不说明，可以看这个博客一看就懂：阿里云 OSS_小白一个-CSDN博客_阿里云oss ，这个有一定参考价值，可以先免费试用一个月，各种权限要给全哈

开发环境：

后端 springboot 2.5.2

前端 react native 0.63.4 （如果你是其它端，逻辑上都通用）

从react native 端直传到OSS 流程图

一、后端 SpringBoot 环境搭建

阿里云OSS对象存储官方文档

1. 导入阿里云依赖

2. 初始化一个OSSClient

对应在springboot的代码是

@Slf4j
@Component
public class OssAliYun {// Endpoint以杭州为例，其它Region请按实际情况填写。String endpoint = "http://oss-cn-beijing.aliyuncs.com";String accessKeyId = "自己的id";String accessKeySecret = "自己的密钥";String bucketName = "池的名字";private OSS ossClient;@PostConstructprivate void init() {// 创建OSSClient实例。ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);}}

3. 授权访问

上面我已经初始化了OssClient实例，本来要看一下上传文件的，但是我们想实现的功能是，从前端直接上传到OSS上，只需要看授权访问即可。

简单解释一下授权访问：就是后端生成一个带有过期时间、密钥的 url，你直接通过这个url上传二进制流( 注意 )，就能将文件直接传到OSS上面你了。

在上面的OssAliYun这个类里面，添加临时授权的代码

public class OssAliYun {...public URL generateUploadUri(String bucketName, String objectName, Date expiration, String contentType, Map<String, String> userMetadata) {GeneratePresignedUrlRequest request = new GeneratePresignedUrlRequest(bucketName, objectName, HttpMethod.PUT);//设置签名URL过期时间为3600秒（1小时）request.setExpiration(expiration);// 设置ContentType。request.setContentType(contentType); // "text/plain"// 设置自定义元信息。if (userMetadata != null) {userMetadata.forEach((k, v) -> {request.addUserMetadata(k, v);});}// 生成签名URL。return ossClient.generatePresignedUrl(request);}...
}

现在后端阿里云返回临时授权url的步骤就基本完成，剩下的就是接收前端提交的参数，传给OssAliYun这个工具类了

二、前端 react native

通过临时授权的url只能上传二进制流，不信你看看官方文档

对应postman的就是body 下面的binary

react native 根本不需要

Aliyun OSS SDK for React Native，因为将密钥写在app里面非常危险。react native 想传二进制文件直接使用 rn-fetch-blob 的 Upload a file from storage

 RNFetchBlob.fetch('PUT', STS临时授权的url, {'Content-Type': 你上传的文件类型, //这个必须要是文件类型，不然就会报签名错误（后端生成时是由后缀名，不传签名验证对不上）}, RNFetchBlob.wrap(文件路径)).then(res=>{console.log(res);//状态码为200后，你就要上传 可以访问该图片的公开url（后端在返回STS url时返回） 和 其它信息}).catch(err=>{console.log(err);})

后记，PC直传OSS

博客地址

react native 直传阿里云 OSS云存储相关推荐

java oss 批量传输_阿里云OSS对象存储，服务端签名后直传阿里云OSS
继续上一章文章,这次要操作的是,浏览器请求服务要到签名后直传给OSS对象存储. 1.写好服务端的方法,传给前台相应的密钥 @Resource OSSClient ossClient; @Value(& ...
【谷粒商城之整合阿里云OSS对象存储】
本笔记内容为尚硅谷谷粒商城整合阿里云OSS对象存储部分目录一 .简介二.云存储开通与使用 1.开通阿里云对象存储服务 2.创建bucket 3.创建子用户(获取密钥访问OSS服务器) 给该子账户 ...
java oss 批量传输_初步使用阿里云OSS对象存储功能
在使用之前先了解上传文件/图片的过程,首先我觉得使用阿里云对象存储功能可以分为三种方式上传到阿里云OSS中: 1).第一种方案就是:浏览器把文件传到自己的程序中,通过Java代码去给阿里云OSS服务器 ...
阿里云OSS云存储平台
阿里云OSS云存储平台实战--图片上传/下载/删除一.OSS实战要求使用SpringBoot和OSS实现图片的上传.下载和删除功能, 具体要求如下: 可以使用postman 发送上传请求 /pic ...
宝塔面板如何将数据自动备份到阿里云OSS对象存储
首先我们需要购买阿里云OSS对象存储的容量包,价格一般不贵. 操作步骤: 先新建一个bucket,也叫做桶,用来装你的备份数据,权限设置为私有. 接着,在宝塔面板后台安装阿里云OSS,填写相关信息接 ...
阿里云OSS对象存储-图文详解
阿里云OSS对象存储认识OSS 一.创建Bucket 二.后台服务接口编写三.接口测试认识OSS 在实际的项目中,经常要用到上传图片的地方,阿里云的OSS对象存储,可以很好的将我们上传的图片存储 ...
【阿里云OSS对象存储搭配CDN加速使用】
阿里云OSS对象存储搭配CDN加速使用什么是CDN? 为什么选择阿里云CDN? 按流量计费说明 CDN按流量计费费如下: OSS外网流出流量标准收费如下: 步骤一:准备工作步骤二.开通CDN 涉及 ...
阿里云OSS对象存储搭建网盘教程
阿里云OSS对象存储高可靠数据存储服务,使用OSS对象存储搭建个人网盘或企业网盘,存储可靠性高下载不限速,当然阿里云推出了自家的网盘,码笔记分享使用OSS对象存储搭建个人网盘或企业网盘的方法: 使用O ...
阿里云Oss云存储的使用
阿里云Oss云存储的使用阿里云OSS云存储能够实现提供远程的文件上传服务器的功能,简化了文件上传功能.本文章简单描述在IDEAJava项目中通过API使用OSS创建Bucket功能. 一.开通OSS ...
【Typora图床设置】Typora图片上传和阿里云OSS对象存储
问题描述因为Typora是纯文本编辑器,所以无法导入图片,但是可以显示图片.换句话说,Typora文档中保存的图片实际上是图片的存储地址,Typora会根据这个地址来显示图片.我们在使用Typora ...

react native 直传阿里云 OSS云存储

准备：在阿里云官网购买OSS云存储服务

开发环境：

从react native 端直传到OSS 流程图

一、后端 SpringBoot 环境搭建

1. 导入阿里云依赖

2. 初始化一个OSSClient

3. 授权访问

二、前端 react native

后记，PC直传OSS

react native 直传阿里云 OSS云存储相关推荐

最新文章

热门文章

react native 直传 阿里云 OSS云存储

准备：在阿里云官网购买OSS云存储服务

开发环境：

从react native 端直传 到OSS 流程图

一、后端 SpringBoot 环境搭建

1. 导入阿里云依赖

2. 初始化一个OSSClient

3. 授权访问

二、前端 react native

后记，PC直传OSS

react native 直传 阿里云 OSS云存储相关推荐

最新文章

热门文章

react native 直传阿里云 OSS云存储

从react native 端直传到OSS 流程图

react native 直传阿里云 OSS云存储相关推荐