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

refactor: update uploadImg component

Browse Source
This commit is contained in:
yanglbme 2020-12-04 20:47:28 +08:00
parent 71704264c5
commit 186026afa1
5 changed files with 94 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,19 +0,0 @@
import fileApi from "../../api/file";
export function uploadImgFile(file) {
return new Promise((resolve, reject) => {
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);
});
};
});
}

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

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

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

@ -31,7 +31,6 @@
name="file"
:before-upload="beforeImageUpload"
:http-request="uploadImage"
v-loading="uploadingImg"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
@ -305,9 +304,6 @@
</template>
<script>
import { uploadImgFile } from "../../assets/scripts/uploadImageFile";
import { toBase64 } from "../../assets/scripts/util";
import fileApi from "../../api/file";
export default {
props: {
@ -315,9 +311,14 @@ export default {
type: Boolean,
default: false,
},
a: {
type: Boolean,
default: false,
}
},
data() {
return {
checkResult: false,
formGitHub: {
repo: "",
branch: "",
@ -378,9 +379,13 @@ export default {
},
],
imgHost: "default",
uploadingImg: false,
};
},
watch: {
a: function(newVal, oldVal) {
this.checkResult = newVal;
}
},
created() {
if (localStorage.getItem("githubConfig")) {
this.formGitHub = JSON.parse(localStorage.getItem("githubConfig"));
@ -401,50 +406,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 (
@ -455,21 +442,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() {
@ -481,18 +461,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() {
@ -505,56 +478,20 @@ 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("保存成功");
},
beforeImageUpload(file) {
let imgHost = localStorage.getItem("imgHost");
imgHost = !imgHost ? "default" : imgHost;
const config = localStorage.getItem(`${imgHost}Config`);
const maxSize = 5;
const isValidSuffix = /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(
file.name
);
const isLt5M = file.size / 1024 / 1024 <= maxSize;
const isValidHost = imgHost == "default" || config;
if (!isValidSuffix) {
this.$message.error("请上传 JPG/PNG/GIF 格式的图片");
}
if (!isLt5M) {
this.$message.error(
`由于公众号限制，图片大小不能超过 ${maxSize}M`
);
}
if (!isValidHost) {
this.$message.error(`请先配置 ${imgHost} 图床参数`);
}
return isValidSuffix && isLt5M && isValidHost;
this.$emit("beforeUpload", file);
console.log(this.checkResult);
return this.checkResult;
},
uploadImage(params) {
this.uploadingImg = true;
uploadImgFile(params.file)
.then((res) => {
this.$emit("uploaded", res);
})
.catch((err) => {
this.$message.error(err);
});
this.uploadingImg = false;
return this.$emit("uploadImage", params.file);
},
},
};

2
src/main.js
View File

@ -2,6 +2,7 @@ import Vue from "vue";
import App from "./App.vue";
import store from "./store";
import ElementUI from "element-ui";
import { Message} from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import "./plugins/element";
import "codemirror/lib/codemirror.css";
@ -16,6 +17,7 @@ import "codemirror/addon/hint/css-hint.js";
import "./assets/less/theme.less";
Vue.use(ElementUI);
Vue.use(Message);
Vue.config.productionTip = false;

105
src/view/CodemirrorEditor.vue
View File

@ -73,7 +73,10 @@
<upload-img-dialog
v-model="dialogUploadImgVisible"
@close="dialogUploadImgVisible = false"
@beforeUpload="beforeUpload"
@uploadImage="uploadImage"
@uploaded="uploaded"
:a = "a"
/>
<about-dialog v-model="aboutDialogVisible" />
<insert-form-dialog v-model="dialogFormVisible" />
@ -101,7 +104,9 @@ import {
saveEditorContent,
customCssWithTemplate,
} 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";
@ -120,6 +125,7 @@ export default {
source: "",
mouseLeft: 0,
mouseTop: 0,
a: false,
};
},
components: {
@ -174,37 +180,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 +226,64 @@ export default {
});
this.onEditorRefresh();
},
beforeUpload(file) {
// check filename suffix
const isValidSuffix = /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(
file.name
);
if (!isValidSuffix) {
this.$message.error("请上传 JPG/PNG/GIF 格式的图片");
this.a = false;
return;
}
// check file size
const maxSize = 5;
const isLt5M = file.size / 1024 / 1024 <= maxSize;
if (!isLt5M) {
this.$message.error(
`由于公众号限制，图片大小不能超过 ${maxSize}M`
);
this.a = false;
return;
}
// 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} 图床参数`);
this.a = false;
return;
}
this.a = 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 +293,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();
},
// 左右滚动