基于vue-simplemde實(shí)現(xiàn)圖片拖拽、粘貼功能

window.addEventListener("drop", e => {
 e = e || event
 if (e.target.className === 'CodeMirror-scroll') { // 如果進(jìn)入到編輯器的話，將阻止默認(rèn)事件
 e.preventDefault()
 }
}, false)

// 假設(shè)頁面一共有三個(gè)編輯窗口，所以需要循環(huán)監(jiān)聽事件
[ 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 = [] // 要上傳的文件實(shí)例數(shù)組

 // 循環(huán)，是因?yàn)榭赡軙?huì)同時(shí)拖動(dòng)幾個(gè)圖片文件
 for (let i = 0; i < dataList.length; i++) {
 // 如果不是圖片，則彈窗警告 僅支持拖拽圖片文件
  if (dataList[i].type.indexOf('image') === -1) {
  // 下面的continue，作用是，如果用戶同時(shí)拖動(dòng)2個(gè)圖片和一個(gè)文檔，那么文檔不給于上傳，圖片照常上傳。
  continue
  }
  imageFiles.push(dataList[i]) // 先把當(dāng)前的文件push進(jìn)數(shù)組里，等for循環(huán)結(jié)束之后，統(tǒng)一上傳。
 }
 // uploadImagesFile方法是上傳圖片的方法
 // simplemde.codemirror的作用是用于區(qū)分當(dāng)前的圖片上傳是處于哪個(gè)編輯框
 this.uploadImagesFile(simplemde.codemirror, imageFiles)
 // 因?yàn)橐呀?jīng)有了下面這段代碼，所以上面的屏蔽默認(rèn)事件代碼就不用寫了
 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) => { // 粘貼圖片的觸發(fā)函數(shù)
 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) {
 // 把每個(gè)文件實(shí)例使用FormData進(jìn)行包裝一下，然后返回一個(gè)數(shù)組
 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)
 }
 }

 // 服務(wù)端返回的格式是{state: Boolean, data: String}
 // state為false時(shí)，data就是返回的錯(cuò)誤信息
 // state為true時(shí)，data是圖片上傳后url地址，這個(gè)地址是針對(duì)網(wǎng)站的絕對(duì)路徑。如下：
 // /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的錯(cuò)誤信息
   continue
  }
  let url = `![](${location.origin + data})` // 拼接成markdown語法
  let content = simplemde.getValue()
  simplemde.setValue(content + url + '\n') // 和編輯框之前的內(nèi)容進(jìn)行拼接
  }
 }))
}

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

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