思路：
觸發(fā)區(qū)域選擇，在選區(qū)加上監(jiān)聽方法
獲取剪切板的信息
展現(xiàn)在頁面氏仗，或者作為參數(shù)在其他接口中使用
代碼如下：
<template>
<div class="text-correct">
<div class="box" ref="showImg">
<img v-if="imgUrl" :src="imgUrl" class="fit-center">
</div>
</div>
</template>
<script>
import api from '../api'
export default {
mounted() {
const self = this
this.$refs.showImg.addEventListener('paste', function (event) {
let items = event.clipboardData && event.clipboardData.items
let file = null
if (items && items.length) {
// 檢索剪切板items
for (let i = 0; i < items.length; i++) {
if (items[i].type.indexOf('image') !== -1) {
//這里拿到了圖片的流文件
file = items[i].getAsFile()
var formData = new FormData()
formData.append('file', file)
//借助FormData對象將數(shù)據(jù)傳給你的api
api.yourApi(formData).then((e) => {
self.text = e.data.result.join('\n')
})
break
}
}
}
// 預(yù)覽圖片
const reader = new FileReader()
reader.onload = function (event) {
self.imgUrl = event.target.result
}
reader.readAsDataURL(file)
})
}
}
</script>
1吉捶，在元素上綁定一個paste黏貼事件，在黏貼版找到類型為圖片的item皆尔，用getAsFile()方法呐舔，變成file對象。
2慷蠕，如果要展示圖片珊拼，用FileReader()從file對象中讀取數(shù)據(jù)，直接拿base64地址展示流炕；
3澎现，如果要將拿到的剪切板內(nèi)容傳給某個API存儲或調(diào)用，借助FormData對象將數(shù)據(jù)傳給你的api
