接入七牛云SDK上传文件

发表于 分类于

前言

想把markdown的图片都上传到图床上，方便管理引用；刚好手里有个七牛云的对象存储空间，所以就动手接入七牛的SDK，将图片上传到存储空间。

由于单纯地利用客户端的SDK并不能直接上传文件到七牛云空间中，还需要服务端的SDK返回上传token后才能进行上传操作，因此要配置一个服务端接口来获取上传的token。

接入流程

服务端

由于手上只有一个PHP的服务器可以用，所以这里就以PHP SDK为例。

  1. 在项目中引入七牛云的SDK包；

  2. 在对应接口文件中引入SDK包，调用Auth类生成上传token；如：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    require_once("../tools/qiniu-sdk/7.2.10/autoload.php");
    use Qiniu\Auth;

    $auth = new Auth($AK, $SK); // $AK就是Access Key，$SK就是Serect Key
    $token = $auth->uploadToken($bucket); //
    if ($token) { // 判断token是否生成
      $data = [
        "token" => $token
      ];
      $message = "七牛云上传token获取成功！";
    } else {
      $code = 400;
      $message = "七牛云上传token生成失败！";
    }

    注：生成token需要存储空间的Access Key、Serect Key和bucket（空间名）参数。

  3. 返回token即可；

客户端（浏览器）

  1. 安装qiniu-js并引入；

    1
    import * as Qiniu from 'qiniu-js' // 注意qiniu-js并没有export default！

  2. 获取到要上传的文件后，根据服务端接口获取上传token；

  3. 利用upload()方法上传文件；

    1
    2
    3
    4
    5
    6
    7
    8
    9
    if (res.data.token) {
        const cur = dayjs().format('YYYYMMDDHHmmss')
        const observer: QiniuObservable = Qiniu.upload(
          img, // 文件
          `${config.path}${cur}${getSuffix(img.name)}`, // 文件名
          res.data.token // 上传token
        )
        return observer
    }

  4. 调用js SDK的上传方法后，会返回一个对象，这个对象包含几个回调，可以用于监听上传进度，错误以及上传完成等状态；

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    export interface ObserverNextRes {
      /**
       * 进度更新回调数据
       */
      total: {
        /**
         * 已上传大小，单位为字节
         */
        loaded: number;
        /**
         * 本次上传的总量控制信息，单位为字节
         */
        total: number;
        /**
         * 当前上传进度，范围：0～100
         */
        percent: number;
      };
    }

    export interface ObserverError {
      isRequestError: boolean;
      code: number;
      message: number;
      reqId: string;
    }

    export interface QiniuObserver {
      /**
       * 接收上传进度信息的回调
       */
      next: (res: ObserverNextRes) => void;
      /**
       * 上传错误回调
       */
      error: (err: ObserverError) => void;
      /**
       * 上传完成后的回调
       */
      complete: (info: any) => void;
    }

    这个对象的结构大致如QiniuObserver接口所描述的；其中complete回调参数的具体结构可以在服务端进行配置；

对qiniu-js的封装可以看看这个demo；

SDK文档

服务端SDK

客户端SDK