feat: allow custom img host

This commit is contained in:
hlw 2020-08-30 20:21:15 +08:00
parent 624a0d3307
commit f9c7d14a3f
5 changed files with 213 additions and 54 deletions

View File

@ -19,10 +19,28 @@ const fileUploadConfig = {
function fileUpload(content, filename) {
const date = new Date();
const dir = date.getFullYear() + '/' + (date.getMonth() + 1).toString().padStart(2, '0') + '/' + date.getDate().toString().padStart(2, '0');
const uuid = uuidv4();
const token = fileUploadConfig.accessToken[Math.floor(Math.random() * fileUploadConfig.accessToken.length)].replace('doocsmd', '');
const uuid = uuidv4();
const dateFilename = new Date().getTime() + '-' + uuid + '.' + filename.split('.')[1];
const url = `https://api.github.com/repos/${fileUploadConfig.username}/${fileUploadConfig.repo}/contents/${dir}/${dateFilename}`;
const imgHost = localStorage.getItem("ImgHost") || 'default'
let token = ''
let username = ''
let repo = ''
if (imgHost === 'default') {
token = fileUploadConfig.accessToken[Math.floor(Math.random() * fileUploadConfig.accessToken.length)].replace('doocsmd', '');
username = fileUploadConfig.username
repo = fileUploadConfig.repo
}
if (imgHost === 'github' && localStorage.getItem("GitHubConfig")) {
const githubConfg = JSON.parse(localStorage.getItem("GitHubConfig"));
token = githubConfg.accessToken
username = githubConfg.username
repo = githubConfg.repo
}
const url = `https://api.github.com/repos/${username}/${repo}/contents/${dir}/${dateFilename}`;
return fetch({
url,

View File

@ -1,14 +1,9 @@
<template>
<el-container class="top is-dark">
<!-- 图片上传 -->
<el-upload class="header__item" action="https://github.com/doocs/md"
:headers="{'Content-Type': 'multipart/form-data'}"
:show-file-list="false" :multiple="true" accept=".jpg,.jpeg,.png,.gif" name="file"
:before-upload="beforeUpload">
<el-tooltip :effect="effect" content="上传图片" placement="bottom-start">
<i class="el-icon-upload" size="medium"></i>
</el-tooltip>
</el-upload>
<el-tooltip :effect="effect" content="上传图片" placement="bottom-start">
<i class="el-icon-upload" size="medium" @click="$emit('showDialogUploadImg')"></i>
</el-tooltip>
<!-- 下载文本文档 -->
<el-tooltip class="header__item" :effect="effect" content="下载编辑框Markdown文档" placement="bottom-start">
<i class="el-icon-download" size="medium" @click="$emit('downLoad')"></i>
@ -76,7 +71,6 @@ import {
fixCodeWhiteSpace,
setColorWithCustomTemplate
} from '../../assets/scripts/util'
import {uploadImgFile} from '../../assets/scripts/uploadImageFile';
import {
solveWeChatImage,
solveHtml
@ -154,19 +148,6 @@ export default {
this.setCiteStatus(val)
this.$emit('refresh')
},
//
beforeUpload(file) {
uploadImgFile(file).then(res => {
this.$emit('uploaded', res)
}).catch(err => {
this.$message({
showClose: true,
message: err,
type: 'error'
});
});
return false;
},
//
copy(e) {
this.$emit('startCopy');

View File

@ -1,12 +1,7 @@
<template>
<ul v-show="value" id="menu" class="menu" :style="`left: ${left}px;top: ${top}px;`">
<li v-for="item of list" :key="item.key" class="menu_item" @mousedown="onMouseDown(item.key)">
<el-upload v-if="item.key === 'insertPic'" action="" class="li__upload"
:show-file-list="false" :multiple="true" accept=".jpg,.jpeg,.png,.gif" name="file"
:before-upload="beforeUpload">
<button class="btn-upload">{{item.text}}</button>
</el-upload>
<span v-else>{{item.text}}</span>
<span>{{item.text}}</span>
</li>
</ul>
</template>
@ -56,27 +51,9 @@ export default {
closeCB() {
this.$emit('input', false);
},
// el-upload
//
beforeUpload(file) {
uploadImgFile(file).then(res => {
this.$emit('menuTick', 'insertPic', res)
}).catch(err => {
this.$message({
showClose: true,
message: err,
type: 'error'
});
});
return false;
},
onMouseDown(key){
if (key == 'insertPic') {
document.querySelector('.li__upload button').click()
} else {
this.$emit('menuTick', key)
}
this.$emit('closeMenu', false)
this.$emit('menuTick', key)
this.$emit('closeMenu', false)
}
},
}

View File

@ -0,0 +1,177 @@
<template>
<el-dialog title="插入图片" class="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="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>
<el-upload
drag
action
:headers="{'Content-Type': 'multipart/form-data'}"
:show-file-list="false"
:multiple="true"
accept=".jpg, .jpeg, .png, .gif"
name="file"
:before-upload="beforeUpload"
v-loading="uploadingImg"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处
<em>点击上传</em>
</div>
<!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件且不超过500kb</div> -->
</el-upload>
</el-tab-pane>
<el-tab-pane class="github-panel" label="Github图床" name="github">
<el-form
class="setting-form"
ref="form"
:model="formGitHub"
label-position="right"
label-width="100px"
>
<el-form-item label="用户名:">
<el-input v-model="formGitHub.username"></el-input>
</el-form-item>
<el-form-item label="仓库名:">
<el-input v-model="formGitHub.repo"></el-input>
</el-form-item>
<el-form-item label="token:">
<el-input v-model="formGitHub.accessToken"></el-input>
</el-form-item>
<!-- <el-form-item label="jsDelivr CDN:">
<el-checkbox v-model="formGitHub.useCDN"></el-checkbox>
</el-form-item>-->
<el-form-item>
<el-button type="primary" @click="onSubmit">保存配置</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</el-dialog>
</template>
<script>
import { uploadImgFile } from "../../assets/scripts/uploadImageFile";
export default {
props: {
value: {
type: Boolean,
default: false,
},
},
data() {
return {
formGitHub: {
username: "",
repo: "",
accessToken: "",
// useCDN: true,
},
options: [
{
value: "default",
label: "默认图床",
},
{
value: "github",
label: "GitHub",
},
],
imgHost: "default",
uploadingImg: false,
};
},
created() {
if (localStorage.getItem("GitHubConfig")) {
this.formGitHub = JSON.parse(localStorage.getItem("GitHubConfig"));
}
if (localStorage.getItem("ImgHost")) {
this.imgHost = localStorage.getItem("ImgHost");
}
},
methods: {
changeImgHost() {
console.log("select img host:", this.imgHost);
localStorage.setItem("ImgHost", this.imgHost);
},
onSubmit() {
console.log("submit github params:", this.formGitHub);
localStorage.setItem("GitHubConfig", JSON.stringify(this.formGitHub));
this.$message({
message: "保存成功",
type: "success",
});
},
//
beforeUpload(file) {
if (!this.validateConfig()) {
return;
}
this.uploadingImg = true;
uploadImgFile(file)
.then((res) => {
this.$emit("uploaded", res);
this.uploadingImg = false;
})
.catch((err) => {
this.uploadingImg = false;
this.$message({
showClose: true,
message: err,
type: "error",
});
});
return false;
},
validateConfig() {
switch (this.imgHost) {
case "github":
const { username, repo, accessToken } = this.formGitHub;
if (!username || !repo || !accessToken) {
this.$message.error("未配置GitHub参数");
return false;
}
}
return true;
},
},
};
</script>
<style lang="less" scoped>
.upload-panel {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
.el-select {
align-self: flex-end;
margin: 0 67.75px 20px;
width: 100px;
}
}
.github-panel {
display: flex;
justify-content: center;
}
.setting-form {
width: 70%;
.el-form-item {
margin: 15px;
}
.el-form-item:last-child {
text-align: right;
}
}
</style>

View File

@ -5,12 +5,12 @@
<editor-header
ref="header"
@refresh="onEditorRefresh"
@uploaded="uploaded"
@cssChanged="cssChanged"
@downLoad="downloadEditorContent"
@showCssEditor="showCssEditor = !showCssEditor"
@showAboutDialog="aboutDialogVisible = true"
@showDialogForm="dialogFormVisible = true"
@showDialogUploadImg="dialogUploadImgVisible = true"
@startCopy="isCoping = true, backLight = true"
@endCopy="endCopy"
/>
@ -42,6 +42,7 @@
</el-row>
</el-main>
</el-container>
<upload-img-dialog v-model="dialogUploadImgVisible" @close="dialogUploadImgVisible = false" @uploaded="uploaded" />
<about-dialog v-model="aboutDialogVisible"/>
<insert-form-dialog v-model="dialogFormVisible"/>
<right-click-menu
@ -58,6 +59,8 @@ import editorHeader from '../components/CodemirrorEditor/header';
import aboutDialog from '../components/CodemirrorEditor/aboutDialog';
import insertFormDialog from '../components/CodemirrorEditor/insertForm';
import rightClickMenu from '../components/CodemirrorEditor/rightClickMenu';
import uploadImgDialog from '../components/CodemirrorEditor/uploadImgDialog';
import {
css2json,
downLoadMD,
@ -74,6 +77,7 @@ export default {
return {
showCssEditor: false,
aboutDialogVisible: false,
dialogUploadImgVisible: false,
dialogFormVisible: false,
isCoping: false,
isImgLoading: false,
@ -89,7 +93,8 @@ export default {
editorHeader,
aboutDialog,
insertFormDialog,
rightClickMenu
rightClickMenu,
uploadImgDialog
},
computed: {
...mapState({
@ -191,6 +196,7 @@ export default {
});
return;
}
this.dialogUploadImgVisible = false
//
const cursor = this.editor.getCursor();
const imageUrl = response;
@ -277,7 +283,7 @@ export default {
this.$refs.header.showResetConfirm = true;
break;
case 'insertPic':
this.uploaded(info);
this.dialogUploadImgVisible = true
break;
case 'downLoad':
this.downloadEditorContent();