思路:
- 触发区域选择,在选区加上监听方法
- 获取剪切板的信息
- 展现在页面,或者作为参数在其他接口中使用
代码如下:
<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对象将数据传给你的api
api.yourApi(formData).then((e) => {
self.text = e.data.result.join('\n')
})
break
}
}
}
// 预览图片
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对象中读取数据,直接拿base64地址展示;
3,如果要将拿到的剪切板内容传给某个API存储或调用,借助FormData对象将数据传给你的api