oss图片上传（三）

这是我参与11月更文挑战的第28天，活动详情查看：2021最后一次更文挑战

SDK方式使用流程

由于本人是前端，对的实现不是很了解，所以这里就照搬官网的步骤，给大家看下哈

这里以java SDK作为例子，介绍如何快速使用OSS Java SDK完成常见操作，如创建存储空间（Bucket）、上传文件（Object）、下载文件等。

创建存储空间

存储空间是OSS的全局命名空间，相当于数据的容器，可以存储若干文件。 以下代码用于创建存储空间

// Endpoint以杭州为例，其它Region请按实际情况填写。
String endpoint = "https://oss-cn-hangzhou.aliyuncs.com";
// 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。
String accessKeyId = "<yourAccessKeyId>";
String accessKeySecret = "<yourAccessKeySecret>";
String bucketName = "<yourBucketName>";
 
// 创建OSSClient实例。
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
 
// 创建存储空间。
ossClient.createBucket(bucketName);
 
// 关闭OSSClient。
ossClient.shutdown();            

上传文件

以下代码用于上传文件至OSS：

// Endpoint以杭州为例，其它Region请按实际情况填写。
String endpoint = "https://oss-cn-hangzhou.aliyuncs.com";
// 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。
String accessKeyId = "<yourAccessKeyId>";
String accessKeySecret = "<yourAccessKeySecret>";
String bucketName = "<yourBucketName>";
// <yourObjectName>上传文件到OSS时需要指定包含文件后缀在内的完整路径，例如abc/efg/123.jpg。
String objectName = "<yourObjectName>";
 
// 创建OSSClient实例。
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
 
// 上传文件到指定的存储空间（bucketName）并将其保存为指定的文件名称（objectName）。
String content = "Hello OSS";
ossClient.putObject(bucketName, objectName, new ByteArrayInputStream(content.getBytes()));
 
// 关闭OSSClient。
ossClient.shutdown();            

下载文件

// Endpoint以杭州为例，其它Region请按实际情况填写。
String endpoint = "https://oss-cn-hangzhou.aliyuncs.com";
// 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。
String accessKeyId = "<yourAccessKeyId>";
String accessKeySecret = "<yourAccessKeySecret>";
String bucketName = "<yourBucketName>";
// <yourObjectName>从OSS下载文件时需要指定包含文件后缀在内的完整路径，例如abc/efg/123.jpg。
String objectName = "<yourObjectName>";
 
// 创建OSSClient实例。
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
 
// 调用ossClient.getObject返回一个OSSObject实例，该实例包含文件内容及文件元信息。
OSSObject ossObject = ossClient.getObject(bucketName, objectName);
// 调用ossObject.getObjectContent获取文件输入流，可读取此输入流获取其内容。
InputStream content = ossObject.getObjectContent();
if (content != null) {
    BufferedReader reader = new BufferedReader(new InputStreamReader(content));
    while (true) {
        String line = reader.readLine();
        if (line == null) break;
        System.out.println("\n" + line);
    }
    // 数据读取完成后，获取的流必须关闭，否则会造成连接泄漏，导致请求无连接可用，程序无法正常工作。
    content.close();
}
 
// 关闭OSSClient。
ossClient.shutdown(); 

列举文件

// Endpoint以杭州为例，其它Region请按实际情况填写。
String endpoint = "https://oss-cn-hangzhou.aliyuncs.com";
// 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。
String accessKeyId = "<yourAccessKeyId>";
String accessKeySecret = "<yourAccessKeySecret>";
String bucketName = "<yourBucketName>";
 
// 创建OSSClient实例。
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
 
// ossClient.listObjects返回ObjectListing实例，包含此次listObject请求的返回结果。
ObjectListing objectListing = ossClient.listObjects(bucketName);
// objectListing.getObjectSummaries获取所有文件的描述信息。
for (OSSObjectSummary objectSummary : objectListing.getObjectSummaries()) {
    System.out.println(" - " + objectSummary.getKey() + "  " +
            "(size = " + objectSummary.getSize() + ")");
}
 
// 关闭OSSClient。
ossClient.shutdown();         

web端使用oss上传

   每个OSS的用户都会用到上传服务。Web端常见的上传方法是用户在浏览器或App端上传文件到应用服务器，应用服务器再把文件上传到OSS。具体流程如下图所示：

和数据直传到OSS相比，以上方法有三个缺点：

上传慢：用户数据需先上传到应用服务器，之后再上传到OSS。网络传输时间比直传到OSS多一倍。如果用户数据不通过应用服务器中转，而是直传到OSS，速度将大大提升。 扩展性差：如果后续用户多了，应用服务器会成为瓶颈 目前通过Web前端技术上传文件到OSS，有三种技术方案：

a. 利用OSS Browser.js SDK将文件上传到OSS

该方案通过OSS Browser.js SDK直传数据到OSS。在网络条件不好的状况下可以通过断点续传的方式上传大文件。

Browser.js SDK的安装方式有以下几种：

浏览器引入

<!-- 引入在线资源 -->
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-x.x.x.min.js"></script>  
 
<!-- 在代码中使用 -->     
 
<script type="text/javascript">
  let client = new OSS({
    // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
    region: 'yourRegion',
    // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
    accessKeyId: 'yourAccessKeyId',
    accessKeySecret: 'yourAccessKeySecret',
    // 从STS服务获取的安全令牌（SecurityToken）。
    stsToken: 'yourSecurityToken',
    // 填写Bucket名称。
    bucket: 'examplebucket'
  });
</script>                 

使用npm安装SDK开发包

npm install ali-oss                           
 
 
 
使用
 
let OSS = require('ali-oss');
 
let client = new OSS({
    // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
    region: 'yourRegion',
    // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
    accessKeyId: 'yourAccessKeyId',
    accessKeySecret: 'yourAccessKeySecret',
    // 从STS服务获取的安全令牌（SecurityToken）。
    stsToken: 'yourSecurityToken',
    // 填写Bucket名称。
    bucket: 'examplebucket'
});

使用方式

OSS Browser.js SDK支持同步和异步的使用方式。

同步方式：基于ES7规范的async/await，使得异步方式同步化。

异步方式：与Callback方式类似，API接口返回Promise，使用then()处理返回结果，使用catch()处理错误。

同步方式：

// 实例化OSS Client。
let client = new OSS(...);
 
async function put () {
  try {
    // object表示上传到OSS的文件名称。
    // file表示浏览器中需要上传的文件，支持HTML5 file和Blob类型。
    let r1 = await client.put('object', file);
    console.log('put success: %j', r1);
    let r2 = await client.get('object');
    console.log('get success: %j', r2);
  } catch (e) {
    console.error('error: %j', e);
  }
}
 
put();                    

异步方式：

// 实例化OSS Client。
let client = new OSS(...);
 
// object表示上传到OSS的文件名称。
// file表示浏览器中需要上传的文件，支持HTML5 file和Blob类型。
client.put('object', file).then(function (r1) {
  console.log('put success: %j', r1);
  return client.get('object');
}).then(function (r2) {
  console.log('get success: %j', r2);
}).catch(function (err) {
  console.error('error: %j', err);
});                    

b. 使用表单上传方式，将文件上传到OSS

利用OSS提供的PostObject接口，使用表单上传方式将文件上传到OSS。该方案兼容大部分浏览器，但在网络状况不好的时候，如果单个文件上传失败，只能重试上传。

方法介绍

• 在客户端通过JavaScript代码完成签名，然后通过表单直传数据到OSS。
• 在服务端完成签名，然后通过表单直传数据到OSS。
• 在服务端完成签名，并且服务端设置了上传后回调，然后通过表单直传数据到OSS。OSS回调完成后，再将应用服务器响应结果返回给客户端。

c. 通过小程序上传文件到OSS

通过小程序，如微信小程序和支付宝小程序，利用OSS提供的PostObject接口来实现表单上传。这里就不做详细说明了，可以看官网哦。

实际使用

  我在实际开发中，做的是一个图片的上传，然后使用的是公司小伙伴对其做的二次封装的oss上传。

  站在前端的角度来说的话，流程大概如下：

就是我们前端将文件以及biztype也就是存储目录上传至我们公司内部的服务库，然后我们内部的服务再将其转发至oss阿里云服务。

上传后，我们得到的会是一个key值，接着前端将此key值发送给我们的后端，即上传完成。

前端回显也很简单，两种方案：

• 一种是调后端接口，后端通过key查出当前key所对应的path，并且将path返回给前端。
• 另一种是后端将key直接返回给前端，由前端使用key去直接调服务的接口，然后获取到与key相对应的path。

使用CDN加速OSS访问

用户直接访问OSS资源，访问速度会受到OSS的下行带宽以及Bucket地域的限制。如果通过CDN来访问OSS资源，带宽上限更高，并且可以将OSS的资源缓存至就近的CDN节点，通过CDN节点进行分发，访问速度会更快

传统网站架构下，动态资源和静态资源不分离，随着访问量的增长，性能会成为瓶颈，如下图所示（来源于官网）：

如果采用动静分离的网站架构，就能够解决海量用户访问的性能瓶颈问题，如下图所示：

该架构的要点如下：

将动态资源如Web程序、数据库等存放在云服务器ECS上。

将静态资源如图片、音视频、静态脚本等存放在对象存储OSS上。

将OSS作为CDN的源站，通过CDN加速分发，使用户通过CDN节点就近获得文件。

该架构有以下优势：

降低了Web服务器负载。

OSS的资源缓存至就近的CDN节点，通过CDN节点进行分发，缩短了网络传输距离，加快了用户的调用速度。

支持海量存储。

OSS的存储空间弹性无限扩展，您无需考虑存储架构升级。

以上就是本文章的全部内容了，大部分内容来自官网，其中加了自己的一些理解，还有使用的案例，提供给不愿意翻官网的‘懒人’盆友使用。若想详细的了解，还是推荐去看看官网，内容会更加详细哦。希望读完这篇文章，能够对你有所帮助～