vue-simplemde ermöglicht das Ziehen und Einfügen von Bildern

Dieses Mal bringe ich Ihnen Vue-Simplemde zum Ziehen und Einfügen von Bildern mit. Hier ist ein praktischer Fall, schauen wir uns das an.

Aber dies vue-simplemde unterstützt kein Drag-and-Drop-Upload oder Einfügen-Upload von Bildern, und es kann nicht gesagt werden, dass es an vue-simplemde liegt, da vue-simplemde nur in einem Vue-Plugin gekapselt ist -in 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

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)

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-Event-Handling-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(&#39;image&#39;) === -1) {
  // 下面的continue，作用是，如果用户同时拖动2个图片和一个文档，那么文档不给于上传，图片照常上传。
  continue
  }
  imageFiles.push(dataList[i]) // 先把当前的文件push进数组里，等for循环结束之后，统一上传。
 }
 // uploadImagesFile方法是上传图片的方法
 // simplemde.codemirror的作用是用于区分当前的图片上传是处于哪个编辑框
 this.uploadImagesFile(simplemde.codemirror, imageFiles)
 // 因为已经有了下面这段代码，所以上面的屏蔽默认事件代码就不用写了
 e.preventDefault()
 })
})

Auf den ersten Blick scheint der Code etwas zu viel zu sein. Das liegt an den Kommentaren. Sie können Ihre eigene Meinung und Ihr eigenes Verständnis basierend auf dem folgenden Code haben:

[ 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(&#39;image&#39;) === -1) {
  continue
  }
  imageFiles.push(dataList[i])
 }
 this.uploadImagesFile(simplemde.codemirror, imageFiles)
 e.preventDefault()
 })
})

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) {
 // 弹窗说明，只能粘贴图片
 }
})

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.

dataList[0].getAsFile().type.indexOf('image') !== -1 Bei diesem Satz handelt es sich nachweislich um ein Bild und nicht um etwas anderes.

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.

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 = `![](${location.origin + data})` // 拼接成markdown语法
  let content = simplemde.getValue()
  simplemde.setValue(content + url + &#39;\n&#39;) // 和编辑框之前的内容进行拼接
  }
 }))
}

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, um es 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
 })

Übersetzen Sie diesen Code in

axios.all(requests)
 .then(axios.spread((...resps) => {
 // code
 })

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:

Was tun, wenn die Daten nach der Aktualisierung der Vuex-Seite nicht gespeichert werden können

Anleitung Tun Sie es in tatsächlichen Projekten Vue2.0 Radioauswahl gegenseitiger Ausschluss

Das obige ist der detaillierte Inhalt vonvue-simplemde ermöglicht das Ziehen und Einfügen von Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!