vscode-七牛云上传插件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yangxuan0261/article/details/84496380

---

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