Tui-editor中实现图片的粘贴与拖拽上传

2020.03.14 06:03:58
98
阅读约 2 分钟
Scroll down

分享一个在Tui-editor中实现图片的粘贴与拖拽上传的方法,具体效果如下,方法主要借鉴了这篇文章https://my.oschina.net/xuqiang/blog/1863395
img

粘贴上传🍌 #

移除监听器 #

首先对于markdown编辑器来讲,一般都会有默认的paste事件监听器,如果我们再去添加一个监听器,是不会产生效果的,所以我们需要移除自带的事件监听器。

对于tui-editor我们可以采用下面的代码去移除监听器

export default (editor) => {
  /* eslint-disable */
  // 获取编辑器上的功能条
  const toolbar = editor.getUI().getToolbar()
  // 移除掉这个,自定义粘贴事件
  editor.eventManager.removeEventHandler('paste')
  }

自定义处理方法 #

vue组件中,我们自己定义一个方法

  pasteUpload() {
    /* eslint-disable */
    // 定义监听的范围
     var dp: any = document.getElementById('editorSection')
     dp.addEventListener(
      'paste',
      (this.paste = (event: any): any => {
        if (event.clipboardData) {
          // not for ie11  某些chrome版本使用的是event.originalEvent
          const clipboardData = event.clipboardData
          if (clipboardData.items) {
            // for chrome
            const items = clipboardData.items
            const len = items.length
            let blob = null
            // event.preventDefault()

            // 在items里找粘贴的image,据上面分析,需要循环
            for (let i = 0; i < len; i++) {
              if (items[i].type.includes('image')) {
                blob = items[i].getAsFile()
              }
            }

            if (blob !== null) {
              // const reader = new FileReader()
              // reader.onload = (event) => {
              //   // event.target.result 即为图片的Base64编码字符串
              //   this.uploadFile(event.target.result, 'paste')
              //   console.log(event)
              // }
              // reader.readAsDataURL(blob)
              this.uploadFile(blob, 'paste')
            }
          }
        }
      })
    )
  }

因为我采用的是云端图片上传的方式,可以直接把blob交给和uploadFile这个函数

  async uploadFile(e: any, type?: any) {
    if (type === 'paste') {
      file = e
    } 
    const params = new FormData()

    params.append('file', file)

    const config = {
      headers: { 'Content-Type': 'multipart/form-data' }
    }

    let res
    await setTimeout(async () => {
      res = await this.$http.post('/files/ali', params, config)
      cosnt  url = res.data.url + '?x-oss-process=style/' + 'post-picture'
  }
  
  // 下面可以定义一些上传成功后的动作
}

现在我们就完成了整个事件的处理,实现了图片的粘贴上传。

拖拽上传🍎 #

移除监听器 #

拖拽上传同样需要移除默认的监听器

 editor.eventManager.removeEventHandler('drop')

自定义处理方法 #

写一个处理图片拖拽的方法

    var dp: any = document.getElementById('editorSection')
    dp.addEventListener('dragover', (e: any) => {
      e.stopPropagation()
      //阻止浏览器默认打开文件的操作
      e.preventDefault()
      e.dataTransfer.dropEffect = 'copy'
    })

    //单图上传
    dp.addEventListener('drop', (e: any) => {
      e.stopPropagation()
      //阻止浏览器默认打开文件的操作
      e.preventDefault()
      var files = e.dataTransfer.files
      var file = files[0]

      this.uploadFile(file, 'drop')
    })
  }

在监听drop的事件中将图片数据交给uploadFile在后端完成图片的上传。

阅读:98 . 字数:407 发布于 7 个月前
Copyright 2018-2020 Siques