amass/md
1
0
Fork 0
mirror of https://github.com/doocs/md.git synced 2024-11-25 03:18:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

update: ImgUpload update

Browse Source
This commit is contained in:
JimQing 2020-07-13 20:58:38 +08:00
parent 3940a9e816
commit 4de82b263e
5 changed files with 59 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/assets/scripts/uploadImageFile.js Normal file
View File

@ -0,0 +1,30 @@
import fileApi from '../../api/file';
export function uploadImgFile(file) {
return new Promise((resolve, reject)=> {
const checkImageResult = isImageIllegal(file);
if (checkImageResult) {
reject(checkImageResult);
} else {
let fd = new FormData();
fd.append('file', file);
fileApi.fileUpload(fd).then(res => {
resolve(res);
}).catch(err => {
console.log(err.message)
})
}
});
}
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;
}

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

@ -187,15 +187,6 @@ export function saveEditorContent(editor, name) {
}
}
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;
}
export function formatDoc(content) {
const doc = prettier.format(content, {

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

@ -73,11 +73,10 @@
import {
downLoadMD,
setFontSize,
isImageIllegal,
fixCodeWhiteSpace,
setColorWithCustomTemplate
} from '../../assets/scripts/util'
import fileApi from '../../api/file';
import {uploadImgFile} from '../../assets/scripts/uploadImageFile';
import {
solveWeChatImage,
solveHtml
@ -151,24 +150,15 @@ export default {
},
// 图片上传前的处理
beforeUpload(file) {
const checkImageResult = isImageIllegal(file);
if (checkImageResult) {
this.$message({
showClose: true,
message: checkImageResult,
type: 'error'
});
return false;
}
let fd = new FormData();
fd.append('file', file);
fileApi.fileUpload(fd).then(res => {
uploadImgFile(file).then(res=> {
this.$emit('uploaded', res)
}).catch(err=> {
console.log(err.message)
})
this.$message({
showClose: true,
message: err,
type: 'error'
});
});
return false;
},
// 复制到微信公众号

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

@ -13,9 +13,8 @@
<script>
import {
isImageIllegal,
} from '../../assets/scripts/util';
import fileApi from '../../api/file';
uploadImgFile,
} from '../../assets/scripts/uploadImageFile';
export default {
props: {
value: {
@ -60,24 +59,15 @@ export default {
// 空函数，阻断el-upload上传
// 图片上传前的处理
beforeUpload(file) {
const checkImageResult = isImageIllegal(file);
if (checkImageResult) {
this.$message({
showClose: true,
message: checkImageResult,
type: 'error'
});
return false;
}
let fd = new FormData();
fd.append('file', file);
fileApi.fileUpload(fd).then(res => {
uploadImgFile(file).then(res=> {
this.$emit('menuTick', 'insertPic', res)
}).catch(err=> {
console.log(err.message)
})
this.$message({
showClose: true,
message: err,
type: 'error'
});
});
return false;
},
},

37
src/view/CodemirrorEditor.vue
View File

@ -61,7 +61,6 @@
</div>
</template>
<script>
import fileApi from '../api/file';
import editorHeader from '../components/CodemirrorEditor/header';
import aboutDialog from '../components/CodemirrorEditor/aboutDialog';
import insertFormDialog from '../components/CodemirrorEditor/insertForm';
@ -70,10 +69,10 @@ import {
css2json,
downLoadMD,
setFontSize,
isImageIllegal,
saveEditorContent,
customCssWithTemplate
} from '../assets/scripts/util'
import {uploadImgFile} from '../assets/scripts/uploadImageFile';
require('codemirror/mode/javascript/javascript')
import {mapState, mapMutations} from 'vuex';
@ -85,6 +84,7 @@ export default {
dialogFormVisible: false,
rightClickMenuVisible: false,
isCoping: false,
isImgLoading: false,
backLight: false,
timeout: null,
changeTimer: null,
@ -131,31 +131,30 @@ export default {
// 粘贴上传图片并插入
this.editor.on('paste', (cm, e) => {
if (!(e.clipboardData && e.clipboardData.items)) {
return
if (!(e.clipboardData && e.clipboardData.items) || this.isImgLoading) {
return;
}
for (let i = 0, len = e.clipboardData.items.length; i < len; ++i) {
let item = e.clipboardData.items[i]
if (item.kind === 'file') {
const pasteFile = item.getAsFile()
const checkImageResult = isImageIllegal(pasteFile);
if (checkImageResult) {
this.isImgLoading = true;
this.$message({
showClose: true,
message: checkImageResult,
message: '正在加载资源'
});
const pasteFile = item.getAsFile()
uploadImgFile(pasteFile).then(res=> {
this.uploaded(res)
this.isImgLoading = false;
}).catch(err=> {
this.$message({
showClose: true,
message: err,
type: 'error'
});
return;
}
let data = new FormData()
data.append('file', pasteFile)
fileApi.fileUpload(data).then(res => {
this.uploaded(res)
}).catch(err => {
console.log(err.message)
})
this.isImgLoading = false;
});
}
}
});