oss图片上传

最新推荐文章于 2024-05-03 11:45:41 发布

橙程橙

最新推荐文章于 2024-05-03 11:45:41 发布

阅读量7.5k

点赞数 6

分类专栏：乱七八糟文章标签： oss 图片上传

本文链接：https://blog.csdn.net/rolinabc/article/details/119326778

版权

乱七八糟专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1.背景

最近处理了一个需求，将图片的上传方式由原来的公有上传，改为oss私有上传方式。刚开始听到的时候有点懵，什么是私有上传，oss又是什么。所以这篇文章就当作是给大家科普啦～

2.什么是对象存储oss

比较官方的解释是：对象存储OSS是在云上提供无层次结构的分布式存储产品，为用户提供单价较低且快速可靠的数据存储方案。用户可通过云服务器实例或互联网使用 Web API 接口存储和检索数据。在 OSS 上的数据，用户使用指定域名的 URL 地址，通过 HTTP/HTTPS 协议存储和检索每个独立的数据对象

简单的理解：类似银行去存钱一样。用户（前端）把钱交给银行，换来一个账户（对象的key）。用户并不用关心钱（数据）具体被存放到哪里去了（存储）。

阿里云对象存储OSS（Object Storage Service）是阿里云提供的海量、安全、低成本、高持久的云存储服务。

3.oss与普通文件系统的对比

下图为阿里云官网所出的oss与普通文件系统的对比

4. 存储的优点

可扩展性高：存储空间无限，用户不用担心空间不够的问题

安全性高：对象存储通常凭借HTTP调用对象存储本身提供的认证密钥来提供数据访问

效率高：扁平化结构，不受复杂目录系统对性能的影响

成本低：与块存储方式相比，对象存储是最具成本效益的数据存储类型

访问方便：对象存储提供开放的REST API接口。在开发应用时，直接把存储参数写进代码，就可以通过API接口调用对象存储里的数据

5. OSS相关概念

a. 存储空间（Bucket）

存储空间是用户用于存储对象（Object）的容器，所有的对象都必须隶属于某个存储空间。存储空间具有各种配置属性，包括地域、访问权限、存储类型等。用户可以根据实际需求，创建不同类型的存储空间来存储不同的数据。

同一个存储空间的内部是扁平的，没有文件系统的目录等概念，所有的对象都直接隶属于其对应的存储空间。
每个用户可以拥有多个存储空间。
只能包括小写字母、数字和短划线（-）。
必须以小写字母或者数字开头和结尾。
长度必须在3~63字符之间。

b. 对象（Object）

对象是OSS存储数据的基本单元，也被称为OSS的文件。和传统的文件系统不同，对象没有文件目录层级结构的关系。对象由元信息（Object Meta），用户数据（Data）和文件名（Key）组成，并且由存储空间内部唯一的Key来标识。对象元信息是一组键值对，表示了对象的一些属性，比如最后修改时间、大小等信息，同时用户也可以在元信息中存储一些自定义的信息。

对象的生命周期是从上传成功到被删除为止。在整个生命周期内，除通过追加方式上传的Object可以通过继续追加上传写入数据外，其他方式上传的Object内容无法编辑，您可以通过重复上传同名的对象来覆盖之前的对象。

对象的命名规范如下：

使用UTF-8编码。
长度必须在1~1023字符之间。
不能以正斜线（/）或者反斜线（\）开头。

6.控制台方式使用流程

我们可以通过OSS控制台完成常见的基础操作，例如创建存储空间（Bucket）、上传和下载文件（Object）等，

流程如下图所示

开通oss服务
在使用阿里云 OSS 服务之前，请确保您已经注册了阿里云账号并完成实名认证。如果您还没有创建阿里云账号，系统会在您开通 OSS 时提示您注册账号。

操作步骤

登录阿里云官网。

将鼠标移至产品，单击对象存储 OSS，打开 OSS 产品详情页面。

在 OSS 产品详情页，单击立即开通。

开通服务后，在 OSS 产品详情页单击管理控制台直接进入 OSS 管理控制台界面。

您也可以单击位于官网首页右上方菜单栏的控制台，进入阿里云管理控制台首页，然后

单击左侧的对象存储 OSS 菜单进入 OSS 管理控制台界面。

创建存储空间

a.登录OSS管理控制台。

b.单击Bucket列表，然后单击创建Bucket。

c.也可以单击概览，然后单击右上角的创建Bucket。

d.在创建Bucket面板，按如下说明配置必要参数。其他参数均可保持默认配置，也可以

在 Bucket创建完成后单独配置

上传文件

登录OSS管理控制台。

单击左侧导航栏的Bucket列表，然后单击目标Bucket名称。

在文件管理页签，单击上传文件。

在上传文件面板，按如下说明配置各项参数

文件上传至目标Bucket后，您可以执行如下操作：

将文件下载至本地

登录OSS管理控制台。

单击左侧导航栏的Bucket列表，然后单击目标Bucket名称。

单击左侧导航栏的文件管理，下载单个或多个文件。

下载单个文件

方式一：单击目标文件右侧的更多 > 下载。

方式二：单击目标文件的文件名或其右侧的详情，在弹出的详情面板中单击下载。

下载多个文件

选中多个文件，选择批量操作 > 下载。通过OSS控制台可一次批量下载最多100个文件。

通过生成签名URL的方式将文件分享给第三方，供其下载或预览。

通过自定义域名（自有域名）访问文件，需要将自定义域名绑定至文件所在的Bucket。

绑定自定义域名。

登录OSS管理控制台。
单击Bucket列表，之后单击目标Bucket名称。
单击传输管理 > 域名管理。
单击绑定域名。
在绑定域名面板，输入要绑定的域名。

2.添加CNAME记录。

如果添加的域名为当前账号下管理的域名，开启自动添加CNAME记录。
在绑定域名面板，打开自动添加CNAME记录开关。
注意若您绑定的域名已配置过CNAME，则自动添加的CNAME记录会覆盖原有的CNAME记录。
单击提交。
如果添加的域名为非当前账号下的域名，手动添加CNAME记录。
若您的域名为非阿里云托管的域名，需在对应的域名解析商处配置云解析，如腾讯云解析（原DNSPod）或新网，详情请参见配置CNAME。

7. 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();

8. 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接口来实现表单上传。这里就不做详细说明了，可以看官网哦。

9. 实际使用

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

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

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

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

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

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

10.使用CDN加速OSS访问

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

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

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

该架构的要点如下：

将动态资源如Web程序、数据库等存放在云服务器ECS上。
将静态资源如图片、音视频、静态脚本等存放在对象存储OSS上。
将OSS作为CDN的源站，通过CDN加速分发，使用户通过CDN节点就近获得文件。

该架构有以下优势：

降低了Web服务器负载。

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

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

详细的操作步骤见：https://help.aliyun.com/document_detail/173722.html?spm=a2c4g.11186623.6.1784.18f36e02HjTvvF

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

橙程橙

关注

6
点赞
踩
32

收藏

觉得还不错? 一键收藏
1
评论
oss图片上传

1.背景最近处理了一个需求，将图片的上传方式由原来的公有上传，改为oss私有上传方式。刚开始听到的时候有点懵，什么是私有上传，oss又是什么。所以这篇文章就当作是给大家科普啦～2.什么是对象存储oss比较官方的解释是：对象存储OSS是在云上提供无层次结构的分布式存储产品，为用户提供单价较低且快速可靠的数据存储方案。用户可通过云服务器实例或互联网使用 Web API 接口存储和检索数据。在 OSS 上的数据，用户使用指定域名的 URL 地址，通过 HTTP/HTTPS 协议存储和检索每个独立的数.
复制链接

扫一扫