基于 vue-simplemde 实现图片拖拽、粘贴功能的一些思考

window.addEventListener("drop", e => {
  e = e || event
  if (e.target.className === 'CodeMirror-scroll') { // 如果进入到编辑器的话，将阻止默认事件
    e.preventDefault()
  }
}, false)

// 假设页面一共有三个编辑窗口，所以需要循环监听事件
[ 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()
  })
})

[ 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()
  })
})

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

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 + '\n')  // 和编辑框之前的内容进行拼接
      }
    }))
}

Promise.all(requests)
  .then(this.$http.spread((...resps) => {
    // code
  })

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