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

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

// 假設(shè)頁面一共有三個編輯窗口，所以需要循環(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ù)組

 // 循環(huán)，是因為可能會同時拖動幾個圖片文件
 for (let i = 0; i < dataList.length; i++) {
 // 如果不是圖片，則彈窗警告 僅支持拖拽圖片文件
 if (dataList[i].type.indexOf('image') === -1) {
 // 下面的continue，作用是，如果用戶同時拖動2個圖片和一個文檔，那么文檔不給于上傳，圖片照常上傳。
 continue
 }
 imageFiles.push(dataList[i]) // 先把當前的文件push進數(shù)組里，等for循環(huán)結(jié)束之后，統(tǒng)一上傳。
 }
 // uploadImagesFile方法是上傳圖片的方法
 // simplemde.codemirror的作用是用于區(qū)分當前的圖片上傳是處于哪個編輯框
 this.uploadImagesFile(simplemde.codemirror, imageFiles)
 // 因為已經(jīng)有了下面這段代碼，所以上面的屏蔽默認事件代碼就不用寫了
 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) {
 // 把每個文件實例使用FormData進行包裝一下，然后返回一個數(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時，data就是返回的錯誤信息
 // state為true時，data是圖片上傳后url地址，這個地址是針對網(wǎng)站的絕對路徑。如下：
 // /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') // 和編輯框之前的內(nèi)容進行拼接
 }
 }))
}

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

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