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

Merge pull request #50 from doocs/feature_upload-component_20201204

Browse Source 
Feature upload component 20201204
This commit is contained in:
Yang Libin 2020-12-05 21:25:30 +08:00 committed by GitHub
commit b91613e176
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 115 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,35 +0,0 @@
import fileApi from "../../api/file";
export function uploadImgFile(file) {
return new Promise((resolve, reject) => {
const checkImageResult = isImageIllegal(file);
if (checkImageResult) {
reject(checkImageResult);
return;
}
const base64Reader = new FileReader();
base64Reader.readAsDataURL(file);
base64Reader.onload = function () {
const base64Content = this.result.split(",").pop();
fileApi
.fileUpload(base64Content, file)
.then((res) => {
resolve(res);
})
.catch((err) => {
reject(err);
});
};
});
}
export function isImageIllegal(file) {
if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.name)) {
return "请上传 JPG/PNG/GIF 格式的图片";
}
if (file.size > 5 * 1024 * 1024) {
return "由于公众号限制，图片大小不能超过 5.0M";
}
return false;
}

30
src/assets/scripts/util.js
View File

@ -263,3 +263,33 @@ export function createTable({ data, rows, cols }) {
return table;
}
export const toBase64 = (file) =>
new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result.split(",").pop());
reader.onerror = (error) => reject(error);
});
export function checkImage(file) {
// check filename suffix
const isValidSuffix = /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.name);
if (!isValidSuffix) {
return {
ok: false,
msg: "请上传 JPG/PNG/GIF 格式的图片",
};
}
// check file size
const maxSize = 5;
const isLt5M = file.size / 1024 / 1024 <= maxSize;
if (!isLt5M) {
return {
ok: false,
msg: `由于公众号限制，图片大小不能超过 ${maxSize}M`,
};
}
return { ok: true };
}

2
src/components/CodemirrorEditor/header.vue
View File

@ -48,7 +48,7 @@
<i
class="el-icon-s-grid"
size="medium"
@click="$emit('showDialogForm')"
@click="$emit('show-dialog-form')"
></i>
</el-tooltip>
<el-form size="mini" class="ctrl" :inline="true">

1
src/components/CodemirrorEditor/rightClickMenu.vue
View File

@ -19,7 +19,6 @@
</template>
<script>
import { uploadImgFile } from "../../assets/scripts/uploadImageFile";
export default {
props: {
value: {

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

@ -29,8 +29,8 @@
:multiple="true"
accept=".jpg, .jpeg, .png, .gif"
name="file"
:before-upload="beforeUpload"
v-loading="uploadingImg"
:before-upload="beforeImageUpload"
:http-request="uploadImage"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
@ -304,7 +304,7 @@
</template>
<script>
import { uploadImgFile } from "../../assets/scripts/uploadImageFile";
import { checkImage } from "../../assets/scripts/util";
export default {
props: {
@ -375,7 +375,6 @@ export default {
},
],
imgHost: "default",
uploadingImg: false,
};
},
created() {
@ -398,50 +397,32 @@ export default {
methods: {
changeImgHost() {
localStorage.setItem("imgHost", this.imgHost);
this.$message({
showClose: true,
message: "已成功切换图床",
type: "success",
});
this.$message.success("已成功切换图床");
},
saveGitHubConfiguration() {
if (!(this.formGitHub.repo && this.formGitHub.accessToken)) {
const blankElement = this.formGitHub.repo
? "token"
: "GitHub 仓库";
this.$message({
showClose: true,
message: `参数「​${blankElement}」不能为空`,
type: "error",
});
this.$message.error(`参数「​${blankElement}」不能为空`);
return;
}
localStorage.setItem(
"githubConfig",
JSON.stringify(this.formGitHub)
);
this.$message({
message: "保存成功",
type: "success",
});
this.$message.success("保存成功");
},
saveGiteeConfiguration() {
if (!(this.formGitee.repo && this.formGitee.accessToken)) {
const blankElement = this.formGitee.repo
? "私人令牌"
: "Gitee 仓库";
this.$message({
showClose: true,
message: `参数「​${blankElement}」不能为空`,
type: "error",
});
this.$message.error(`参数「​${blankElement}」不能为空`);
return;
}
localStorage.setItem("giteeConfig", JSON.stringify(this.formGitee));
this.$message({
message: "保存成功",
type: "success",
});
this.$message.success("保存成功");
},
saveAliOSSConfiguration() {
if (
@ -452,21 +433,14 @@ export default {
this.formAliOSS.region
)
) {
this.$message({
showClose: true,
message: `阿里云 OSS 参数配置不全`,
type: "error",
});
this.$message.error(`阿里云 OSS 参数配置不全`);
return;
}
localStorage.setItem(
"aliOSSConfig",
JSON.stringify(this.formAliOSS)
);
this.$message({
message: "保存成功",
type: "success",
});
this.$message.success("保存成功");
},
saveTxCOSConfiguration() {
@ -478,18 +452,11 @@ export default {
this.formTxCOS.region
)
) {
this.$message({
showClose: true,
message: `腾讯云 COS 参数配置不全`,
type: "error",
});
this.$message.error(`腾讯云 COS 参数配置不全`);
return;
}
localStorage.setItem("txCOSConfig", JSON.stringify(this.formTxCOS));
this.$message({
message: "保存成功",
type: "success",
});
this.$message.success("保存成功");
},
saveQiniuConfiguration() {
@ -502,44 +469,35 @@ export default {
this.formQiniu.region
)
) {
this.$message({
showClose: true,
message: `七牛云 Kodo 参数配置不全`,
type: "error",
});
this.$message.error(`七牛云 Kodo 参数配置不全`);
return;
}
localStorage.setItem("qiniuConfig", JSON.stringify(this.formQiniu));
this.$message({
message: "保存成功",
type: "success",
});
this.$message.success("保存成功");
},
// 图片上传前的处理
beforeUpload(file) {
const imgHost = localStorage.getItem("imgHost");
beforeImageUpload(file) {
// check image
const checkResult = checkImage(file);
if (!checkResult.ok) {
this.$message.error(checkResult.msg);
return false;
}
// check image host
let imgHost = localStorage.getItem("imgHost");
imgHost = imgHost ? imgHost : "default";
localStorage.setItem("imgHost", imgHost);
const config = localStorage.getItem(`${imgHost}Config`);
if (!config && imgHost !== "" && imgHost !== "default") {
const isValidHost = imgHost == "default" || config;
if (!isValidHost) {
this.$message.error(`请先配置 ${imgHost} 图床参数`);
return false;
}
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;
return true;
},
uploadImage(params) {
this.$emit("uploadImage", params.file);
},
},
};

1
src/main.js
View File

@ -5,7 +5,6 @@ import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import "./plugins/element";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/ambiance.css";
import "codemirror/theme/xq-light.css";
import "codemirror/mode/css/css";
import "codemirror/mode/markdown/markdown";

1
src/store/index.js
View File

@ -152,7 +152,6 @@ const mutations = {
},
clearEditorToDefault(state) {
const doc = formatDoc(DEFAULT_CONTENT);
state.editor.setValue(doc);
state.cssEditor.setValue(DEFAULT_CSS_CONTENT);
},

91
src/view/CodemirrorEditor.vue
View File

@ -9,7 +9,7 @@
@download="downloadEditorContent"
@showCssEditor="showCssEditor = !showCssEditor"
@show-about-dialog="aboutDialogVisible = true"
@showDialogForm="dialogFormVisible = true"
@show-dialog-form="dialogFormVisible = true"
@show-dialog-upload-img="dialogUploadImgVisible = true"
@startCopy="(isCoping = true), (backLight = true)"
@endCopy="endCopy"
@ -73,6 +73,8 @@
<upload-img-dialog
v-model="dialogUploadImgVisible"
@close="dialogUploadImgVisible = false"
@beforeUpload="beforeUpload"
@uploadImage="uploadImage"
@uploaded="uploaded"
/>
<about-dialog v-model="aboutDialogVisible" />
@ -100,8 +102,11 @@ import {
setFontSize,
saveEditorContent,
customCssWithTemplate,
checkImage,
} from "../assets/scripts/util";
import { uploadImgFile } from "../assets/scripts/uploadImageFile";
import { toBase64 } from "../assets/scripts/util";
import fileApi from "../api/file";
require("codemirror/mode/javascript/javascript");
import { mapState, mapMutations } from "vuex";
@ -174,37 +179,14 @@ export default {
++i
) {
let item = e.clipboardData.items[i];
if (item.kind === "file") {
// 校验图床参数
const imgHost =
localStorage.getItem("imgHost") || "default";
if (
imgHost != "default" &&
!localStorage.getItem(`${imgHost}Config`)
) {
this.$message({
showClose: true,
message: "请先配置好图床参数",
type: "error",
});
const pasteFile = item.getAsFile();
const isValid = this.beforeUpload(pasteFile);
if (!isValid) {
continue;
}
this.isImgLoading = true;
const pasteFile = item.getAsFile();
uploadImgFile(pasteFile)
.then((res) => {
this.uploaded(res);
})
.catch((err) => {
this.$message({
showClose: true,
message: err,
type: "error",
});
});
this.isImgLoading = false;
this.uploadImage(pasteFile);
}
}
});
@ -243,14 +225,49 @@ export default {
});
this.onEditorRefresh();
},
beforeUpload(file) {
// validate image
const checkResult = checkImage(file);
if (!checkResult.ok) {
this.$message.error(checkResult.msg);
return false;
}
// check image host
let imgHost = localStorage.getItem("imgHost");
imgHost = imgHost ? imgHost : "default";
localStorage.setItem("imgHost", imgHost);
const config = localStorage.getItem(`${imgHost}Config`);
const isValidHost = imgHost == "default" || config;
if (!isValidHost) {
this.$message.error(`请先配置 ${imgHost} 图床参数`);
return false;
}
return true;
},
uploadImage(file) {
this.isImgLoading = true;
toBase64(file)
.then((base64Content) => {
fileApi
.fileUpload(base64Content, file)
.then((url) => {
this.uploaded(url);
})
.catch((err) => {
this.$message.error(err.message);
});
})
.catch((err) => {
this.$message.error(err.message);
});
this.isImgLoading = false;
},
// 图片上传结束
uploaded(response) {
if (!response) {
this.$message({
showClose: true,
message: "上传图片未知异常",
type: "error",
});
this.$message.error("上传图片未知异常");
return;
}
this.dialogUploadImgVisible = false;
@ -260,11 +277,7 @@ export default {
const markdownImage = `![](${imageUrl})`;
// 将 Markdown 形式的 URL 插入编辑框光标所在位置
this.editor.replaceSelection(`\n${markdownImage}\n`, cursor);
this.$message({
showClose: true,
message: "图片上传成功",
type: "success",
});
this.$message.success("图片上传成功");
this.onEditorRefresh();
},
// 左右滚动