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
效果图
修改了一下增加进度条, 看起来好看一点
关键上传代码
没有过多的 七牛云 上传参数配置, 直接上传原图上去
-
安装七牛模块
>npm i qiniu --save
-
上传代码,
-
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; }
-
-
使用时先初始化本地配置
-
配置 settings.json 的 用户区
"wilker-cfg.qiniu": { "accessKey": "rBO3Oeasdasdasdasdasdasd", "secretKey": "xL2C42asdasdasdasdasdasdasd", "bucket": "asdasd", "zone": "", "domain": "http://asdasdasd.com", "isDelLocal": true, },
-
使用代码
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 就回自动上传到图床