vscode-七牛雲上傳插件

title: vscode-七牛雲上傳插件

categories: VSCode

tags: [vscode, 插件, 七牛雲]

date: 2018-11-25 14:44:18

comments: false

使用七牛雲的js-sdk, 開發一個vscode的上傳插件.

(附: Chrome 有個插件 qiniu upload files 也挺好用的, 支援拖拽上傳, 但是有個确定是隻能上傳到 華東 地區的 bucket.)

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

效果圖

修改了一下增加進度條, 看起來好看一點

關鍵上傳代碼

沒有過多的 七牛雲 上傳參數配置, 直接上傳原圖上去

1. 安裝七牛子產品

   >npm i qiniu --save
              

2. 上傳代碼,
   • QiniuMgr.ts

     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 });
                     return;
                 }
     
                 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

     // 七牛雲 配置
     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 的 使用者區

      "wilker-cfg.qiniu": {
              "accessKey": "rBO3Oeasdasdasdasdasdasd",
              "secretKey": "xL2C42asdasdasdasdasdasdasd",
              "bucket": "asdasd",
              "zone": "",
              "domain": "http://asdasdasd.com",
              "isDelLocal": true,
          },
                 

   2. 使用代碼

      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 更新

增加一個添加 建立的 檔案的監聽, 然符合要求的檔案自動上傳

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 就回自動上傳到圖床