vscode-七牛云上传插件

分类于

使用七牛云的js-sdk, 开发一个vscode的上传插件.

(附: Chrome 有个插件 qiniu upload files 也挺好用的, 支持拖拽上传, 但是有个确定是只能上传到 华东 地区的 bucket.)

官方文档参考: https://developer.qiniu.com/kodo/sdk/1289/nodejs#io-put-policy

效果图

修改了一下增加进度条, 看起来好看一点

关键上传代码

没有过多的 七牛云 上传参数配置, 直接上传原图上去

  1. 安装七牛模块

    1
    >npm i qiniu --save

  2. 上传代码,

    • QiniuMgr.ts

      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
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      import { IQiniuRes, IQiniuCfg } from "../myext/Define";

      import * as qiniu from 'qiniu';
      import * as path from 'path';
      import * as url from 'url';
      import Utils from "../myext/Utils";

      export class QiniuMgr {
          private static _ins: QiniuMgr;
          public static get Ins() {
              if (this._ins === undefined) {
                  this._ins = new QiniuMgr();
              }
              return this._ins;
          }

          private config: IQiniuCfg;
          private uploader: qiniu.form_up.FormUploader;
          private mac: qiniu.auth.digest.Mac;

          public init(cfg: IQiniuCfg): void {
              this.config = cfg;
              this.uploader = new qiniu.form_up.FormUploader();
              this.mac = new qiniu.auth.digest.Mac(cfg.accessKey, cfg.secretKey);
          }

          private getToken(): string {
              var options = {
                  scope: this.config.bucket,
                  expires: 7200, // 凭证有效期为两小时
              };
              var putPolicy = new qiniu.rs.PutPolicy(options);
              return putPolicy.uploadToken(this.mac);
          }

          // 用时间作为保存文件名
          private genSrvFileName(filePath: string): string {
              let fileName = Utils.getFormatTime() + path.extname(filePath);
              return fileName;
          }

          public async doUpload(filePath: string, srvFileName?: string) {
              return new Promise<IQiniuRes>((resolve, reject) => {
                  // 检测配置
                  if (Object.keys(this.config).length === 0) {
                      let msg: Error = {
                          name: "错误",
                          message: "未配置 七牛云 信息",
                      }
                      resolve({ err: msg });
                  }

                  if (srvFileName === undefined) {
                      srvFileName = this.genSrvFileName(filePath);
                  }
                  let extra = new qiniu.form_up.PutExtra();
                  this.uploader.putFile(this.getToken(), srvFileName, filePath, extra, (err, { key }) => {
                      if (!err) {
                          // 上传成功， 处理返回值
                          let resInfo: IQiniuRes = {
                              err: err,
                              name: path.basename(key),
                              url: url.resolve(this.config.domain, srvFileName),
                          };
                          // console.log("--- resInfo 222:", resInfo);

                          if (this.config.isDelLocal) {
                              Utils.delFileSync(filePath);
                          }
                          resolve(resInfo);
                      } else {
                          resolve({ err: err });
                      }
                  });
              });
          }
      }

    • 配置定义: Define.ts

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      // 七牛云 配置
      export interface IQiniuCfg {
          accessKey: string;
          secretKey: string;
          bucket: string;
          domain: string;
          zone?: string;   //区域, 可以不填

          isDelLocal: boolean; // 是否删除本地文件
      }

      // 七牛云 上传结果
      export interface IQiniuRes {
          err: Error;
          name?: string;
          url?: string;
      }

  3. 使用时先初始化本地配置

    1. 配置 settings.json 的 用户区

      1
      2
      3
      4
      5
      6
      7
      8
      "wilker-cfg.qiniu": {
          "accessKey": "rBO3Oeasdasdasdasdasdasd",
          "secretKey": "xL2C42asdasdasdasdasdasdasd",
          "bucket": "asdasd",
          "zone": "",
          "domain": "http://asdasdasd.com",
          "isDelLocal": true,
      },

    2. 使用代码

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      private initQiniu() {
          this.cfg = vscode.workspace.getConfiguration("wilker-cfg");
          let info: IQiniuCfg = this.cfg.get<IQiniuCfg>("qiniu");
          QiniuMgr.Ins.init(info);
      }

      // 上传文件到 七牛云 图床上. 具体批量逻辑那些就不贴了, 这里简单师范上传接口
      public async qiniuUpload() {
          let fsPath = "f:vscode-plugin001-wilker/src/myext/PluginMgr.ts"
          let res = await QiniuMgr.Ins.doUpload(fsPath);
          console.log("--- 上传结果, res:", res);
          if (res.err) {
              Utils.showErrMsg("上传失败, message:" + res.err.message);
              return;
          }
      }

2018-12-27 更新

增加一个添加 创建的 文件的监听, 然符合要求的文件自动上传

1
2
3
4
5
6
7
8
public async regCreateFileSystemWatcher() {
    let pattern = path.join(vscode.workspace.rootPath, '*.{png,jpg}');
    let fileWatcher = vscode.workspace.createFileSystemWatcher(pattern, false, true, true);
    this.extCtx.subscriptions.push(fileWatcher);
    fileWatcher.onDidCreate((uri) => {
        this.onCreateUploadQiniu(uri);
    });
}

这样只要打开工作区即可, 创建好的 png或jpg 就回自动上传到图床