接入七牛云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 KeySerect Keybucket(空间名)参数。

  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