支持黏贴上传图片

This commit is contained in:
xiaozzzi 2023-10-12 19:45:47 +08:00
parent c79786d9f1
commit b8aa26bd89
2 changed files with 55 additions and 15 deletions

View File

@ -477,26 +477,60 @@ const editorLoading = ref(false) // eidtor loading
let cmw: CmWrapper // codemirror editor wrapper
/**
* 拖拽上传的回调
* @param event
* 文件上传回调
* @param event DragEvent | ClipboardEvent
*/
const uploadFileCallback = async (event: DragEvent) => {
const uploadFileCallback = async (event: DragEvent | ClipboardEvent) => {
if (!curIsArticle()) {
return
}
let data: DataTransfer | null = event.dataTransfer
if (data && data.files.length && data.files.length > 0) {
for (const file of data.files) {
const form = new FormData()
form.append('file', file)
form.append('name', file.name)
form.append('pid', curArticle.value!.pid.toString())
uploadFileApi(form).then((resp) => {
cmw.insertBlockCommand(`\n![${file.name}](${resp.data})\n`)
})
/**
* 拖拽上传
*/
if (event instanceof DragEvent) {
let data: DataTransfer | null = event.dataTransfer
if (data && data.files.length && data.files.length > 0) {
for (const file of data.files) {
const form = new FormData()
form.append('file', file)
form.append('name', file.name)
form.append('pid', curArticle.value!.pid.toString())
uploadFileApi(form).then((resp) => {
cmw.insertBlockCommand(`\n![${file.name}](${resp.data})\n`)
})
}
}
}
/**
* 黏贴上传
*/
if (event instanceof ClipboardEvent) {
if (!event.clipboardData) {
return
}
const dataTransferItemList: DataTransferItemList = event.clipboardData?.items
//
const items: DataTransferItem[] = [].slice.call(dataTransferItemList).filter((item: DataTransferItem) => {
return item.type.indexOf('image') !== -1
})
if (items.length === 0) {
return
}
const dataTransferItem: DataTransferItem = items[0]
const file: File | null = dataTransferItem.getAsFile()
if (file == null) {
return
}
const form = new FormData()
form.append('file', file)
form.append('name', file.name)
form.append('pid', curArticle.value!.pid.toString())
uploadFileApi(form).then((resp) => {
cmw.insertBlockCommand(`\n![${file.name}](${resp.data})\n`)
})
}
}
/**

View File

@ -11,6 +11,7 @@ import * as prettier from 'prettier/standalone'
import pluginMarkdown from 'prettier/plugins/markdown'
import { isBlank } from '@renderer/assets/utils/obj'
import { log } from 'console'
const { editorStyle } = useConfigStore()
@ -297,8 +298,13 @@ export class CmWrapper {
}
}),
EditorView.domEventHandlers({
drop(a: DragEvent) {
uploadFileCallback(a)
drop(event: DragEvent) {
console.log(event)
uploadFileCallback(event)
return
},
paste(event: ClipboardEvent) {
uploadFileCallback(event)
return
}
})