fix: resolve upload error

This commit is contained in:
yanglbme 2020-12-05 21:16:09 +08:00
parent 186026afa1
commit 00fc92833d
5 changed files with 61 additions and 50 deletions

View File

@ -237,9 +237,9 @@ function fileUpload(content, file) {
case "github": case "github":
return ghFileUpload(content, file.name); return ghFileUpload(content, file.name);
default: default:
return file.size / 1024 < 1024 // return file.size / 1024 < 1024
? giteeUpload(content, file.name) // ? giteeUpload(content, file.name)
: ghFileUpload(content, file.name); // : ghFileUpload(content, file.name);
return ghFileUpload(content, file.name); return ghFileUpload(content, file.name);
} }
} }

View File

@ -264,9 +264,32 @@ export function createTable({ data, rows, cols }) {
return table; return table;
} }
export const toBase64 = file => new Promise((resolve, reject) => { export const toBase64 = (file) =>
new Promise((resolve, reject) => {
const reader = new FileReader(); const reader = new FileReader();
reader.readAsDataURL(file); reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result.split(",").pop()); reader.onload = () => resolve(reader.result.split(",").pop());
reader.onerror = error => reject(error); 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 };
}

View File

@ -304,6 +304,7 @@
</template> </template>
<script> <script>
import { checkImage } from "../../assets/scripts/util";
export default { export default {
props: { props: {
@ -311,14 +312,9 @@ export default {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
a: {
type: Boolean,
default: false,
}
}, },
data() { data() {
return { return {
checkResult: false,
formGitHub: { formGitHub: {
repo: "", repo: "",
branch: "", branch: "",
@ -381,11 +377,6 @@ export default {
imgHost: "default", imgHost: "default",
}; };
}, },
watch: {
a: function(newVal, oldVal) {
this.checkResult = newVal;
}
},
created() { created() {
if (localStorage.getItem("githubConfig")) { if (localStorage.getItem("githubConfig")) {
this.formGitHub = JSON.parse(localStorage.getItem("githubConfig")); this.formGitHub = JSON.parse(localStorage.getItem("githubConfig"));
@ -486,12 +477,27 @@ export default {
}, },
beforeImageUpload(file) { beforeImageUpload(file) {
this.$emit("beforeUpload", file); // check image
console.log(this.checkResult); const checkResult = checkImage(file);
return this.checkResult; 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(params) { uploadImage(params) {
return this.$emit("uploadImage", params.file); this.$emit("uploadImage", params.file);
}, },
}, },
}; };

View File

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

View File

@ -76,7 +76,6 @@
@beforeUpload="beforeUpload" @beforeUpload="beforeUpload"
@uploadImage="uploadImage" @uploadImage="uploadImage"
@uploaded="uploaded" @uploaded="uploaded"
:a = "a"
/> />
<about-dialog v-model="aboutDialogVisible" /> <about-dialog v-model="aboutDialogVisible" />
<insert-form-dialog v-model="dialogFormVisible" /> <insert-form-dialog v-model="dialogFormVisible" />
@ -103,6 +102,7 @@ import {
setFontSize, setFontSize,
saveEditorContent, saveEditorContent,
customCssWithTemplate, customCssWithTemplate,
checkImage,
} from "../assets/scripts/util"; } from "../assets/scripts/util";
import { toBase64 } from "../assets/scripts/util"; import { toBase64 } from "../assets/scripts/util";
@ -125,7 +125,6 @@ export default {
source: "", source: "",
mouseLeft: 0, mouseLeft: 0,
mouseTop: 0, mouseTop: 0,
a: false,
}; };
}, },
components: { components: {
@ -227,25 +226,11 @@ export default {
this.onEditorRefresh(); this.onEditorRefresh();
}, },
beforeUpload(file) { beforeUpload(file) {
// check filename suffix // validate image
const isValidSuffix = /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test( const checkResult = checkImage(file);
file.name if (!checkResult.ok) {
); this.$message.error(checkResult.msg);
if (!isValidSuffix) { return false;
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 // check image host
@ -257,10 +242,9 @@ export default {
const isValidHost = imgHost == "default" || config; const isValidHost = imgHost == "default" || config;
if (!isValidHost) { if (!isValidHost) {
this.$message.error(`请先配置 ${imgHost} 图床参数`); this.$message.error(`请先配置 ${imgHost} 图床参数`);
this.a = false; return false;
return;
} }
this.a = true; return true;
}, },
uploadImage(file) { uploadImage(file) {
this.isImgLoading = true; this.isImgLoading = true;