阿里云OSS实践文件直传基于服务端

目录
  • 前言
  • 优缺点
  • 流程
  • 逻辑拆解
  • 代码实现
    • OSS 配置
    • policy 内容
    • 有效期
    • 文件名
    • 转化 policy
  • 进一步分析
  • 完整代码

前言

在日常开发中,客户端上传文件的一般流程是:客户端向服务端发送文件,再由服务端将文件转储到专门的存储服务器或云计算厂商的储存服务(例如阿里云 OSS)上,这样做的一个弊端是上传环节占用服务器的带宽,个位数的并发上传就能把带宽占满,从而导致用户体验下降。而如果直接将文件从客户端直传到第三方的存储服务上,就可以避免这个问题。 ​

本文以阿里云 OSS(Object Storage Service,对象存储服务)为例,详细说明将文件从客户端直传 OSS 的整体流程,并提供了完整的代码演示。 ​

优缺点

从“客户端 — 服务器 — OSS”的传输模式,变更为“客户端 — OSS”的模式,最大的好处是,省掉了上传服务器的这一步,上传效率更高,速度更快(相比较于一般服务器的带宽,可以认为 OSS 的宽带是“几乎无限”的)。 ​

当然该模式也有缺点,那就是增加了很多额外的开发工作量,主要包含 2 部分: ​

(1)服务端增加生成上传 OSS 凭证的代码。

(2)客户端增加从服务端获取上传 OSS 凭证的代码和对直传 OSS 进行适配。 ​

整体而言,直传模式除了增加一点开发工作量以外,从架构层面,几乎没有任何缺点。 ​

流程

实际上,整个流程非常简单,包含了两步: ​

(1)客户端向服务端发送请求,获取直传 OSS 的凭证。

(2)客户端向 OSS 上传文件,并携带该凭证。 ​

逻辑拆解

关于如何生成凭证(也叫签名),可以阅读官方文档(help.aliyun.com/document_de…),但由于文档创建时间比较早,对于新手很难看懂,本文将手把手给你演示整个过程。 ​

整个“生成上传 OSS 凭证”过程,实际上做了这么几件事:

(1)上传凭证鉴权由 policy 提供,根据私密配置生成这个 policy

(2)由于上传环节脱离了开发者服务器,因此你可以在 policy 中定义各种限制,例如上传最大体积、文件名等。

(3)将 policy 转化为指定的格式。 ​

代码实现

我们先考虑将流程的每一步实现,然后再将流程代码封装成函数。 ​

OSS 配置

首先定义 OSS 的配置文件,关于配置项的内容,可以参考文档:help.aliyun.com/document_de…

/** OSS 配置项 */
const ossConfig = {
  bucket: 'xxxxxxxx',
  accessKeyId: 'xxxxxxxx',
  accessKeySecret: 'xxxxxxxx',

  /** OSS 绑定的域名 */
  url: 'xxxxxxxx',
}
复制代码

policy 内容

对于 policy ,有很多配置项,我们先考虑生成“写死”的模式,然后再优化为由函数参数传入配置项。以下是一个最基础的 policy 。 ​

有效期

首先定义一个有效时长(单位:毫秒),然后该凭证的有效截止时间则为“当前时间 + 有效时长”,最后需要转化为 ISO 时间字符串格式。 ​

/** 有效时长:例如 4 小时 */
const timeout = 4 * 60 * 60 * 1000

/** 到期时间:当前时间 + 有效时间 */
const expiration = new Date(Date.now() + timeout).toISOString()
复制代码

文件名

文件名建议使用 UUID(笔者习惯性使用去掉短横线的 UUID),避免重复。 ​

import { v4 as uuidv4 } from 'uuid'

/** 随机文件名(去掉短横线的 uuid) */
const filename = uuidv4().replace(/-/gu, '')
复制代码

一般建议按照不同的业务模块,将文件划分不同的目录,例如这里使用 file 目录,那么完整的 OSS 文件路径则为: ​

/** 目录名称 */
const dirname = 'file'

/** 文件路径 */
const key = dirname + '/' + filename
复制代码

需要注意的是,文件路径不能以 “/” 开头(OSS 本身的要求)。 ​

将以上内容整合,就形成了 policy 文本,以下是一个基础格式: ​

const policyText = {
  expiration: expiration,
  conditions: [
    ['eq', '$bucket', ossConfig.bucket],
    ['eq', '$key', key],
  ],
}
复制代码

转化 policy

policyText 转化为 Base64 格式后,就是要求的 policy 了。

// 将 policyText 转化为 Base64 格式
const policy = Buffer.from(JSON.stringify(policyText)).toString('base64')
复制代码

然后对 policy 使用 OSS 密钥使用 HmacSha1 算法签名签名。

import * as crypto from 'crypto'

// 使用 HmacSha1 算法签名
const signature = crypto.createHmac('sha1', ossConfig.accessKeySecret).update(policy, 'utf8').digest('base64')
复制代码

最后将上述流程中的相关字段返回给客户端,即为“上传凭证”。 ​

进一步分析

以上完整演示了整个流程,我们进一步分析,如何将其封装为一个通用性的函数。 ​

(1)凭证的有效时长可以根据不同的业务模块分别定义,于是做成函数配置项。

(2)目录名称也可以做成配置项。

(3) policy 还有更多的配置内容(见文档 help.aliyun.com/document_de…),可以抽取一部分做成配置项,例如“允许上传的最大体积”。 ​

完整代码

以下是封装为“服务”的使用 Nest.js Web 框架的相关代码,来源自笔者的线上项目(略有调整和删改),供参考。 ​

import { Injectable } from '@nestjs/common'
import * as crypto from 'crypto'
import { v4 as uuidv4 } from 'uuid'

export interface GenerateClientTokenConfig {
  /** 目录名称 */
  dirname: string

  /** 有效时间,单位:小时 */
  expiration?: number

  /** 上传最大体积,单位:MB */
  maxSize?: number
}

/** 直传凭证 */
export interface ClientToken {
  key: string
  policy: string
  signature: string
  OSSAccessKeyId: string
  url: string
}

export interface OssConfig {
  bucket: string
  accessKeyId: string
  accessKeySecret: string
  url: string
}

@Injectable()
export class OssService {
  private readonly ossConfig: OssConfig

  constructor() {
    this.ossConfig = {
      bucket: 'xxxxxxxx',
      accessKeyId: 'xxxxxxxx',
      accessKeySecret: 'xxxxxxxx',

      /** OSS 绑定的域名 */
      url: 'xxxxxxxx',
    }
  }

  /**
   * 生成一个可用于客户端直传 OSS 的调用凭证
   *
   * @param config 配置项
   *
   * @see [配置内容](https://help.aliyun.com/document_detail/31988.html#title-6w1-wj7-q4e)
   */
  generateClientToken(config: GenerateClientTokenConfig): ClientToken {
    /** 目录名称 */
    const dirname = config.dirname

    /** 有效时间:默认 4 小时 */
    const timeout = (config.expiration || 4) * 60 * 60 * 1000

    /** 上传最大体积,默认 100M */
    const maxSize = (config.maxSize || 100) * 1024 * 1024

    /** 随机文件名(去掉短横线的 uuid) */
    const filename = uuidv4().replace(/-/gu, '')

    /** 文件路径 */
    const key = dirname + '/' + filename

    /** 到期时间:当前时间 + 有效时间 */
    const expiration = new Date(Date.now() + timeout).toISOString()

    const { bucket, url, accessKeyId } = this.ossConfig

    const policyText = {
      expiration: expiration,
      conditions: [
        ['eq', '$bucket', bucket],
        ['eq', '$key', key],
        ['content-length-range', 0, maxSize],
      ],
    }

    // 将 policyText 转化为 Base64 格式
    const policy = Buffer.from(JSON.stringify(policyText)).toString('base64')

    // 使用 HmacSha1 算法签名
    const signature = crypto.createHmac('sha1', this.ossConfig.accessKeySecret).update(policy, 'utf8').digest('base64')

    return { key, policy, signature, OSSAccessKeyId: accessKeyId, url }
  }
}
复制代码

在完整以上服务方法后,后续就可以在“控制器”层调用该方法用于分发上传凭证,客户端可直接使用该上传凭证将文件直传至 OSS 中。 ​

以上就是阿里云OSS实践文件直传基于服务端的详细内容,更多关于OSS文件直传服务端的资料请关注我们其它相关文章!

(0)

相关推荐

  • SpringBoot整合阿里云OSS对象存储服务实现文件上传

    1. 准备工作: 一.首先登录阿里云OSS对象存储控制台创建一个Bucket作为你的存储空间. 二.创建Access Keyan按要求创建进行,这里的方法步骤我就不展现出来了,你们可以自行查询阿里云文档,这个获取值本身就不难. 重点:记下你的AccessKey ID.AccessKey Secret以及你刚才创建的Buacket名字BucketName. 2. 配置: 在pom里引入oss要用的依赖 <dependency> <groupId>com.aliyun.oss</

  • 微信小程序上传文件到阿里OSS教程

    前言 (一)开通OSS服务与新建Bucket 开通OSS服务这里省略,新建bucket. (二)设置Bucket属性,后台配置域名 上传文件访问域名 这里我们要在小程序后台配置上传域名(上面的域名是我自己的申请的,后台配置的是公司的的域名,使用的时候你们用一套东西即可). 下图是bucket管理,这里可以新建文件的保存路径,域名管理. (三)服务端签名直传 点击查看文档 这里就不多做介绍了,这是上传文件到oss需要的参数,这些数据可以从后台获取. { "accessid": "

  • java实现上传文件到oss(阿里云)功能示例

    本文实例讲述了java实现上传文件到oss(阿里云)功能.分享给大家供大家参考,具体如下: 做这个功能之前我们需要导入阿里云OSS官方提供的工具包 aliyun-sdk-oss-2.5.0.jar 这个文件 如果有最新版的话就下载最新版 aliyun.upload.AliyunConfig package aliyun.upload; public final class AliyunConfig { //你的oss所在域,要加http:// 不明白可以对照你的文件引用地址 public sta

  • 使用阿里云OSS的服务端签名后直传功能的流程分析

    网站一般都会有上传功能,而对象存储服务oss是一个很好的选择.可以快速的搭建起自己的上传文件功能. 该文章以使用阿里云的OSS功能为例,记录如何在客户端使用阿里云的对象存储服务. 服务端签名后直传 背景 采用JavaScript客户端直接签名(参见JavaScript客户端签名直传)时,AccessKey ID和AcessKey Secret会暴露在前端页面,因此存在严重的安全隐患.因此,OSS提供了服务端签名后直传的方案. 流程介绍 流程如下图所示: 本示例中,Web端向服务端请求签名,然后直

  • 阿里云OSS实践文件直传基于服务端

    目录 前言 优缺点 流程 逻辑拆解 代码实现 OSS 配置 policy 内容 有效期 文件名 转化 policy 进一步分析 完整代码 前言 在日常开发中,客户端上传文件的一般流程是:客户端向服务端发送文件,再由服务端将文件转储到专门的存储服务器或云计算厂商的储存服务(例如阿里云 OSS)上,这样做的一个弊端是上传环节占用服务器的带宽,个位数的并发上传就能把带宽占满,从而导致用户体验下降.而如果直接将文件从客户端直传到第三方的存储服务上,就可以避免这个问题. ​ 本文以阿里云 OSS(Obje

  • springboot操作阿里云OSS实现文件上传,下载,删除功能

    参考资料:Java操作阿里云OSS操作官方文档 学会看文档,并实际运用也是一种习惯和技能 下面就来简单入门一下,用当下比较热门的Springboot 去操作阿里云OSS文件存储. 1.需求 (没踩过下面的坑的小伙伴可以直接跳过这一章节) 问题简述 首先,我在之前自己做一些开源小项目案例中遇到一些文件上传下载的问题,比如在本机文件上传和下载都可以正常使用,通过将文件上传到Springboot项目的根目录下,按日期分文件夹,文件访问也很方便,可以直接返回文件相对路径地址,并直接可以访问. 问题 然而

  • 解决springcloud阿里云OSS文件访问跨域问题的实现

    目录 引言 解决 引言 最近在高德地图中引用阿里云OSS存储的图片时,出现跨域访问问题,特此记录,以方便后续同学参考 解决 1.在阿里云OSS后台管理中,进入权限管理,进入跨域设置,添加跨域规则,设置来源为* 2.至此配置完成后访问图片还是会出现跨域问题,这是因为OSS文件默认会开启缓存,及后续访问的实际上是缓存的文件,这就会导致不能匹配到我们上述配置的跨域规则 于是我们需要将缓存禁用掉,如果文件就一两个的话,可以直接在后台中设置禁用缓存,将HTTP头中Cache-Control设置为no-ca

  • Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法

    我测试过很多遍,想要通过a标签的形式来直接点击url下载文件并重命名但是都失败了,最终只能下载却不能重命名 所以 换了java后台来修改名字.以下代码 我做的网页是点击文件直接下载 直接下载下来了,一开始的文件名是上传到oss时以id命名的名字,现在下载的时候想改名,遇到了问题,所以写了这篇博客 首先是后台代码 /** * 附件下载 * <p> * * @param param * @return ResponseDTO */ @PostMapping(value = "/downl

  • 阿里云OSS基于java使用详解

    近几年,云图片服务器五花八门,越来越多,有腾讯云,阿里云,又拍云,华为云等等,但是使用了这么多年,我还是感觉阿里云图片服务器oss比较稳定,访问速度也比较快,因此我在这里手把手教给你如何使用阿里云oss服务: 一.使用之前,我们还是先来搞清楚阿里云oss使用的原理吧: 其实调用方式也就两种,一种是直接客户端调用阿里云提供的服务器进行上传,一种是通过服务器间接上传,我们来分析以下优缺点吧: 上传方式优点缺点直接调用上传速度快,能直接快速上传到阿里云服务器,不需要中转可能会不安全,暴露核心配置信息间

  • React实现阿里云OSS上传文件的示例

    简介 阿里云 OSS 是 阿里云提供的海量.安全.低成本.高可靠的云存储服务,提供 99.9999999999%的数据可靠性(号称).能够使用 RESTful API 可以在互联网任何位置存储和访问,支持容量和处理能力弹性扩展. 基本术语 1.bucket :类似本地的一个文件夹 2.object : oss 存储数据的基本单元,类似本地的一个文件. 3.region:oss 存储的数据中心所在区域 4.Endpoint:oss 对外服务的访问域名,oss 以 http api 提供服务,不同

  • SpringBoot整合阿里云OSS对象存储服务的实现

    今天来整合一下SpringBoot和阿里云OSS对象存储服务. 一.配置OSS服务 先在阿里云开通对象存储服务,拿到AccessKeyId.AccessKeySecret. 创建你的bucket(存储空间),相当于一个一个的文件夹目录.按业务需求分类存储你的文件,图片,音频,app包等等.创建bucket是要选择该bucket的权限,私有,公共读,公共读写,按需求选择.创建bucket时对应的endpoint要记住,上传文件需要用到. 可以配置bucket的生命周期,比如说某些文件有过期时间的,

  • Android 阿里云OSS文件上传的实现示例

    估计有小伙伴看到阿里云oss的api文档十脸懵逼了,啊哈哈哈,接下来博主就来拯救你了,看完觉得好的就关注博主吧,么么么么么哒!!! 想要自己研究阿里云oss的,博主开启传送门给你:阿里云oss 一.项目导入阿里云oss的SDK 方式1:在build文件添加依赖(博主和官方一致推荐) dependencies { //阿里云oss implementation 'com.aliyun.dpa:oss-android-sdk:+' } 方式2:源码编译jar包 源码传送门:官方阿里云oss源码 二.

随机推荐