mirror of
https://github.com/doocs/md.git
synced 2024-11-24 19:10:34 +08:00
feat: support Tencent COS
This commit is contained in:
yanglbme
parent
e79d219a39
commit
30fa4aef25
@ -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",
|
||||
|
||||
@ -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
|
||||
};
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user