amass/md
1
0
Fork 0
mirror of https://github.com/doocs/md.git synced 2024-10-06 12:03:12 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: support Tencent COS

Browse Source
This commit is contained in:
yanglbme 2020-09-15 21:49:30 +08:00
parent e79d219a39
commit 30fa4aef25
4 changed files with 101 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

32
src/api/file.js
View File

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

3
src/assets/scripts/uploadImageFile.js
View File

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

81
src/components/CodemirrorEditor/uploadImgDialog.vue
View File

@ -2,7 +2,7 @@
<el-dialog title="本地上传" class="upload__dialog" :visible="value" @close="$emit('close')">
<el-tabs type="card" :value="'upload'">
<el-tab-pane class="upload-panel" label="选择上传" name="upload">
<el-select v-model.trim="imgHost" @change="changeImgHost" placeholder="请选择" size="small">
<el-select v-model="imgHost" @change="changeImgHost" placeholder="请选择" size="small">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
@ -62,6 +62,35 @@
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane class="github-panel" label="腾讯云 COS" name="txCOS">
<el-form class="setting-form" ref="form" :model="formTxCOS" label-position="right" label-width="140px">
<el-form-item label="SecretId" :required="true">
<el-input v-model.trim="formTxCOS.secretId" placeholder="如：AKIDnQp1w3DOOCSs8F5MDp9tdoocsmdUPonW3"></el-input>
</el-form-item>
<el-form-item label="SecretKey" :required="true">
<el-input v-model.trim="formTxCOS.secretKey" show-password
placeholder="如：ukLmdtEJ9271f3DOocsMDsCXdS3YlbW0"></el-input>
</el-form-item>
<el-form-item label="Bucket" :required="true">
<el-input v-model.trim="formTxCOS.bucket"
placeholder="如：doocs-3212520134"></el-input>
</el-form-item>
<el-form-item label="Bucket 所在区域" :required="true">
<el-input v-model.trim="formTxCOS.region"
placeholder="如：ap-guangzhou"></el-input>
</el-form-item>
<el-form-item label="存储路径">
<el-input v-model.trim="formTxCOS.path"
placeholder="如：img"></el-input>
<el-link type="primary"
href="https://cloud.tencent.com/document/product/436/38484"
target="_blank">如何使用腾讯云 COS？</el-link>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="saveTxCOSConfiguration">保存配置</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</el-dialog>
</template>
@ -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;
},