vue 获取剪切板的信息，图片，并展现

思路：

触发区域选择，在选区加上监听方法
获取剪切板的信息
展现在页面，或者作为参数在其他接口中使用
代码如下：

<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