Dieses Mal werde ich Ihnen die Implementierung der Bild-Drag-and-Paste-Funktion (mit Code) durch Vue-Simplemde vorstellen ist ein praktischer Fall. Stehen Sie auf und werfen Sie einen Blick darauf. Das Projekt verwendet das Vue-Framework und benötigt eine Markdown-Bearbeitungsbox. Da ich faul bin, habe ich erneut auf npm gesucht und es gefunden Dieses Paket können Sie dann verwenden.
Dies vue-simplemde unterstützt jedoch weder das Hochladen per Drag-and-Drop noch das Hochladen von Bildern durch Einfügen, und es kann nicht gesagt werden, dass es an Vue-Simplemde liegt, da Vue-Simplemde nur in einem Vue-Plug-In gekapselt ist basierend auf simplemde. Dies liegt letztendlich daran, dass simplemde keine relevanten Funktionen bereitstellt. Aus Gründen der Benutzererfahrung ist diese Funktion jedoch erforderlich, es sei denn, der Markdown-Editor wird nicht verwendet. Verwenden Sie stattdessen einen Rich-Text-Editor. In diesem Fall muss viel Code im Projekt geändert werden. Also habe ich Artikel online und einige Codes auf Github überprüft. Folgendes wird analysiert
vue-simplemde
Drag and Drop
Der Kern der Drag-API ist das Drop-Ereignis, bei dem wir eine Datei ziehen vom Desktop bis Der Name des Ereignisses, das beim Öffnen des Browsers ausgelöst wird.
Wir alle wissen, dass das Bild direkt geöffnet wird, wenn Sie die Datei in den Browser ziehen Verhindern Sie native Vorgänge.
Lassen Sie uns jetzt einen Code schreiben, um das Standardereignis zu blockieren
window.addEventListener("drop", e => {
e = e || event
if (e.target.className === 'CodeMirror-scroll') { // 如果进入到编辑器的话，将阻止默认事件
e.preventDefault()
}
}, false)Nach dem Login kopieren
CodeMirror-scroll Diese Klasse ist der Klassenname des einfachen Bearbeitungsfelds.
Jetzt ziehen wir die Datei in dieses Bearbeitungsfeld und lassen sie dann los. Es passiert nichts. Wenn es sich außerhalb des Bearbeitungsfelds befindet, wird das Standardereignis trotzdem ausgelöst.
Im Folgenden wird die Simplemde-Methode abgerufen und ihr die Drop-
Ereignisbehandlung
-Methode zugewiesen.
// 假设页面一共有三个编辑窗口，所以需要循环监听事件
[ this.$refs.simplemde1,
this.$refs.simplemde2,
this.$refs.simplemde3
].map(({simplemde}) => {
simplemde.codemirror.on('drop', (editor, e) => {
if (!(e.dataTransfer && e.dataTransfer.files)) {
// 弹窗说明，此浏览器不支持此操作
return
}
let dataList = e.dataTransfer.files
let imageFiles = [] // 要上传的文件实例数组
// 循环，是因为可能会同时拖动几个图片文件
for (let i = 0; i < dataList.length; i++) {
// 如果不是图片，则弹窗警告 仅支持拖拽图片文件
if (dataList[i].type.indexOf('image') === -1) {
// 下面的continue，作用是，如果用户同时拖动2个图片和一个文档，那么文档不给于上传，图片照常上传。
continue
}
imageFiles.push(dataList[i]) // 先把当前的文件push进数组里，等for循环结束之后，统一上传。
}
// uploadImagesFile方法是上传图片的方法
// simplemde.codemirror的作用是用于区分当前的图片上传是处于哪个编辑框
this.uploadImagesFile(simplemde.codemirror, imageFiles)
// 因为已经有了下面这段代码，所以上面的屏蔽默认事件代码就不用写了
e.preventDefault()
})
})Nach dem Login kopieren
[ this.$refs.simplemde1,
this.$refs.simplemde2,
this.$refs.simplemde3
].map(({simplemde}) => {
simplemde.codemirror.on('drop', (editor, e) => {
if (!(e.dataTransfer && e.dataTransfer.files)) {
return
}
let dataList = e.dataTransfer.files
let imageFiles = []
for (let i = 0; i < dataList.length; i++) {
if (dataList[i].type.indexOf('image') === -1) {
continue
}
imageFiles.push(dataList[i])
}
this.uploadImagesFile(simplemde.codemirror, imageFiles)
e.preventDefault()
})
})Nach dem Login kopieren
Einfügen
Die Einfüge-API ist die Einfügemethode nicht wie oben, es besteht keine Notwendigkeit, das Standardereignis beim Einfügen zu deaktivieren, da wir sehen können, dass sich nichts ändert, wenn Sie ein Bild kopieren und im Browser Strg + V drücken, sodass keine Notwendigkeit besteht, das Standardereignis zu deaktivieren Ereignis.
Das Folgende ist der Code:
simplemde.codemirror.on('paste', (editor, e) => { // 粘贴图片的触发函数
if (!(e.clipboardData && e.clipboardData.items)) {
// 弹窗说明，此浏览器不支持此操作
return
}
try {
let dataList = e.clipboardData.items
if (dataList[0].kind === 'file' && dataList[0].getAsFile().type.indexOf('image') !== -1) {
this.uploadImagesFile(simplemde.codemirror, [dataList[0].getAsFile()])
}
} catch (e) {
// 弹窗说明，只能粘贴图片
}
})Nach dem Login kopieren
Der Grund, warum die try...catch-Methode hier geschrieben wird, liegt darin, dass die Elemente beim Einfügen leer sind, wenn es sich um eine Datei handelt. und in der folgenden if-Schleife verwenden Sie dataList[0].kind. Das ist e.clipboardData.items[0].kind. Wenn das Element leer ist und Sie auf ein nicht vorhandenes Art-Attribut zugreifen, wird ein Fehler gemeldet. Hier müssen Sie also die try...catch-Methode zur Beurteilung verwenden.
Dieser Satz ist ein Urteil. Es wird bestätigt, dass es sich bei dem eingefügten Ding um ein Bild und nicht um etwas anderes handelt.
Der Unterschied zwischen den hochgeladenen Bildern in if ist [dataList[0].getAsFile()], denn um das Format zu vereinheitlichen und die Verarbeitung durch die Funktion uploadImagesFile zu erleichtern, habe ich [] hinzugefügt, um daraus ein Array zu machen . dataList[0].getAsFile() dient zum Abrufen der Dateiinstanz. dataList[0].getAsFile().type.indexOf('image') !== -1
Hochladen
Das Hochladen ist etwas mühsam:
uploadImagesFile (simplemde, files) {
// 把每个文件实例使用FormData进行包装一下，然后返回一个数组
let params = files.map(file => {
let param = new FormData()
param.append('file', file, file.name)
return param
})
let makeRequest = params => {
return this.$http.post('/Api/upload', params)
}
let requests = params.map(makeRequest)
this.$http.spread = callback => {
return arr => {
return callback.apply(null, arr)
}
}
// 服务端返回的格式是{state: Boolean, data: String}
// state为false时，data就是返回的错误信息
// state为true时，data是图片上传后url地址，这个地址是针对网站的绝对路径。如下：
// /static/upload/2cfd6a50-3d30-11e8-b351-0d25ce9162a3.png
Promise.all(requests)
.then(this.$http.spread((...resps) => {
for (let i = 0; i < resps.length; i++) {
let {state, data} = resps[i].data
if (!state) {
// 弹窗显示data的错误信息
continue
}
let url = `` // 拼接成markdown语法
let content = simplemde.getValue()
simplemde.setValue(content + url + '\n') // 和编辑框之前的内容进行拼接
}
}))
}Nach dem Login kopieren
Weil ich Axiox zur Verwendung in ein Vue-Plug-in kapsele , führt dies dazu, dass this.$http instanziiert wird, nicht sich selbst. Die vom Axios-Betreuer vorgeschlagene Lösung besteht darin, das Axios-Paket erneut einzuführen und zu verwenden. Aber ich denke nicht, dass es notwendig ist. Intern ist axios.all Promise.all . Der Implementierungscode von axios.spread ist relativ klein, also nehmen Sie ihn einfach und weisen Sie ihn axios neu zu
Der obige Code lautet also
Promise.all(requests)
.then(this.$http.spread((...resps) => {
// code
})Nach dem Login kopieren
Übersetzen Sie diesen Code in
axios.all(requests)
.then(axios.spread((...resps) => {
// code
})Nach dem Login kopieren
Zu diesem Problem lesen Sie bitte die offizielle Erklärung: axios-all-is-not-a-function-inside-vue-component. Sie können sich auch den Code von axios ansehen: axios.js#L45-L48
Wir werden uns vorerst nicht mit diesem Thema befassen.
Ich habe oben erwähnt, dass Daten der absolute Pfad der Datei relativ zur Website sind, wenn der Status „true“ ist, wie zum Beispiel: /static/upload/2cfd6a50-3d30-11e8-b351-0d25ce9162a3.png
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
jQuery-Codierungskonvertierung Base64-Upload über AJAX
Vue-Komponentenschreibspezifikation
Das obige ist der detaillierte Inhalt vonvue-simplemde implementiert die Funktion zum Ziehen und Einfügen von Bildern (Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
