From 30fa4aef2531447d68ae0867312a73236e9ad31d Mon Sep 17 00:00:00 2001 From: yanglbme Date: Tue, 15 Sep 2020 21:49:30 +0800 Subject: [PATCH] feat: support Tencent COS --- package.json | 1 + src/api/file.js | 32 +++++++- src/assets/scripts/uploadImageFile.js | 3 +- .../CodemirrorEditor/uploadImgDialog.vue | 81 ++++++++++++++++--- 4 files changed, 101 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index ba4743f..251febe 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "buffer-from": "^1.1.1", "codemirror": "^5.50.2", "core-js": "^3.4.4", + "cos-js-sdk-v5": "^0.5.27", "element-ui": "^2.13.0", "jquery": "^3.4.1", "juice": "^6.0.0", diff --git a/src/api/file.js b/src/api/file.js index 7a3d081..97c3739 100644 --- a/src/api/file.js +++ b/src/api/file.js @@ -1,5 +1,6 @@ import fetch from './fetch'; import OSS from 'ali-oss'; +import COS from 'cos-js-sdk-v5'; import Buffer from 'buffer-from'; import { v4 as uuidv4 @@ -21,15 +22,17 @@ const defaultConfig = { ] } -function fileUpload(content, filename) { +function fileUpload(content, file) { const imgHost = localStorage.getItem('imgHost'); !imgHost && localStorage.setItem('imgHost', 'default'); switch (imgHost) { case 'aliOSS': - return aliOSSUploadFile(content, filename); + return aliOSSUploadFile(content, file.name); + case 'txCOS': + return txCOSUploadFile(file); case 'github': default: - return githubUploadFile(content, filename); + return githubUploadFile(content, file.name); } } @@ -104,6 +107,29 @@ function aliOSSUploadFile(content, filename) { } } +function txCOSUploadFile(file) { + const dateFilename = new Date().getTime() + '-' + uuidv4() + '.' + file.name.split('.')[1]; + const txCOSConfig = JSON.parse(localStorage.getItem('txCOSConfig')); + const cos = new COS({ + SecretId: txCOSConfig.secretId, + SecretKey: txCOSConfig.secretKey + }); + return new Promise((resolve, reject) => { + cos.putObject({ + Bucket: txCOSConfig.bucket, + Region: txCOSConfig.region, + Key: txCOSConfig.path + '/' + dateFilename, + Body: file + }, function(err, data) { + if (err) { + reject(err); + } else { + resolve("https://" + data.Location); + } + }); + }) +} + export default { fileUpload }; diff --git a/src/assets/scripts/uploadImageFile.js b/src/assets/scripts/uploadImageFile.js index ee0b185..6249762 100644 --- a/src/assets/scripts/uploadImageFile.js +++ b/src/assets/scripts/uploadImageFile.js @@ -12,8 +12,7 @@ export function uploadImgFile(file) { base64Reader.onload = function () { const base64Content = this.result.split(',').pop(); - - fileApi.fileUpload(base64Content, file.name).then(res => { + fileApi.fileUpload(base64Content, file).then(res => { resolve(res); }).catch(err => { reject(err); diff --git a/src/components/CodemirrorEditor/uploadImgDialog.vue b/src/components/CodemirrorEditor/uploadImgDialog.vue index 1719ee1..600714c 100644 --- a/src/components/CodemirrorEditor/uploadImgDialog.vue +++ b/src/components/CodemirrorEditor/uploadImgDialog.vue @@ -2,7 +2,7 @@ - + @@ -62,6 +62,35 @@ + + + + + + + + + + + + + + + + + 如何使用腾讯云 COS？ + + + 保存配置 + + + @@ -91,6 +120,13 @@ export default { region: "", path: "" }, + formTxCOS: { + secretId: "", + secretKey: "", + bucket: "", + region: "", + path: "" + }, options: [{ value: "default", label: "默认图床", @@ -102,6 +138,10 @@ export default { { value: "aliOSS", label: "阿里云" + }, + { + value: "txCOS", + label: "腾讯云" } ], imgHost: "default", @@ -115,6 +155,9 @@ export default { if (localStorage.getItem("aliOSSConfig")) { this.formAliOSS = JSON.parse(localStorage.getItem("aliOSSConfig")); } + if (localStorage.getItem("txCOSConfig")) { + this.formAliOSS = JSON.parse(localStorage.getItem("txCOSConfig")); + } if (localStorage.getItem("imgHost")) { this.imgHost = localStorage.getItem("imgHost"); } @@ -160,6 +203,21 @@ export default { }); }, + saveTxCOSConfiguration() { + if (!(this.formTxCOS.secretId && this.formTxCOS.secretKey && this.formTxCOS.bucket && this.formTxCOS.region)) { + this.$message({ + showClose: true, + message: `腾讯云 COS 参数配置不全`, + type: "error", + }); + return; + } + localStorage.setItem("txCOSConfig", JSON.stringify(this.formTxCOS)); + this.$message({ + message: "保存成功", + type: "success", + }); + }, // 图片上传前的处理 beforeUpload(file) { @@ -186,24 +244,25 @@ export default { validateConfig() { switch (localStorage.getItem('imgHost')) { case "github": - const { - repo, accessToken - } = this.formGitHub; - - if (!repo || !accessToken) { + if (!(this.formGitHub.repo && this.formGitHub.accessToken)) { this.$message.error("请先配置 GitHub 图床参数"); return false; } break; case 'aliOSS': - const { - accessKeyId, accessKeySecret, bucket, region, path - } = this.formAliOSS; - - if (!(accessKeyId && accessKeySecret && bucket && region)) { + if (!(this.formAliOSS.accessKeyId && this.formAliOSS.accessKeySecret && this.formAliOSS.bucket && this.formAliOSS.region)) { this.$message.error("请先配置阿里云 OSS 参数"); return false; } + break; + case 'txCOS': + if (!(this.formTxCOS.secretId && this.formTxCOS.secretKey && this.formTxCOS.bucket && this.formTxCOS.region)) { + this.$message.error("请先配置腾讯云 COS 参数"); + return false; + } + break; + default: + return true; } return true; },