feat: add image upload format and size limitation

受公众号限制,上传图片的大小不能超过 5M
This commit is contained in:
yanglbme 2019-12-31 11:35:33 +08:00
parent 1be928cad4
commit 7a43a22e2e
2 changed files with 37 additions and 6 deletions

View File

@ -84,6 +84,9 @@ let app = new Vue({
let item = e.clipboardData.items[i];
if (item.kind === 'file') {
const pasteFile = item.getAsFile();
if (!(this.checkType(pasteFile) && this.checkImageSize(pasteFile))) {
return;
}
let data = new FormData();
data.append('file', pasteFile);
axios.post('https://imgkr.com/api/files/upload', data, {
@ -154,6 +157,34 @@ let app = new Vue({
});
this.refresh();
},
// 图片上传前的处理
beforeUpload(file) {
return this.checkType(file) && this.checkImageSize(file);
},
// 检查文件类型
checkType(file) {
if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.name)) {
this.$message({
showClose: true,
message: '请上传 JPG/PNG/GIF 格式的图片',
type: 'error'
});
return false;
}
return true;
},
// 检查图片大小
checkImageSize(file) {
if (file.size > 5 * 1024 * 1024) {
this.$message({
showClose: true,
message: '由于公众号限制,图片大小不能超过 5.0M',
type: 'error'
});
return false;
}
return true;
},
// 图片上传结束
uploaded(response, file, fileList) {
if (response.success) {
@ -226,7 +257,6 @@ let app = new Vue({
this.editor.replaceSelection(`\n${table}\n`, cursor);
this.dialogFormVisible = false
this.refresh();
},
statusChanged() {
this.refresh();

View File

@ -73,7 +73,8 @@
<el-header class="top">
<!-- 图片上传 -->
<el-upload action="https://imgkr.com/api/files/upload" headers="{'Content-Type': 'multipart/form-data'}"
:show-file-list="false" :multiple="true" accept=".jpg,.jpeg,.png,.gif" name="file" :on-success="uploaded">
:show-file-list="false" :multiple="true" accept=".jpg,.jpeg,.png,.gif" name="file"
:before-upload="beforeUpload" :on-success="uploaded">
<el-tooltip class="item" effect="dark" content="上传图片" placement="bottom-start">
<i class="el-icon-upload" size="medium">&nbsp;</i>
</el-tooltip>
@ -175,7 +176,7 @@
<el-dialog title="插入表格" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="行数(表头不计入行数)">
<el-input v-model="form.rows"></el-input>
<el-input v-model="form.rows"></el-input>
</el-form-item>
<el-form-item label="列数">
<el-input v-model="form.cols"></el-input>
@ -214,9 +215,9 @@
<script src="assets/scripts/editor.js"></script>
<script>
$('#loading').hide();
window.console
&& window.console.log
&& (console.log("Think big, train fast, learn deep. See https://github.com/yanglbme"))
window.console
&& window.console.log
&& (console.log("Think big, train fast, learn deep. See https://github.com/yanglbme"))
</script>
</body>