前言：因为公司项目中需要在线聊天的客服功能，而且这个功能正好是由我来完成，因为是临时加的功能，且前面还有需求没做完，所以目前功能很简单，只需要实现互相实时聊天且支持简单的emoji表情即可，正所谓兵马未动，粮草先行，想要成为一个优秀的程序员，应该要想到后期可能会增加的功能点，如果此前没有做过类似的功能，那么需要提前抽时间先大概了解一下功能点是否可以实现，且实现是否麻烦，是一个程序员必备的职业素养，当然如果有类似的开源产品，可以借鉴一下都有什么功能特点，可以适当先看一下如何实现,周末闲来无事，就想到了微信聊天中是可以支持图片粘贴的，那么，在线客服功能是否也同样可以支持呢？带着这个问题，我打开了淘宝的网页版，打开客服聊天页面，发现淘宝的并不能直接在文本域中放入图片，而是利用一个弹窗，先进行展示图片，如果点击确定，再次将图片发送给客服(如下图所示)，于是没有做过此项功能的我一下就来了兴致，决定自己也写一个demo来实现一个粘贴图片功能，那么，废话不多说，正片开始

html代码如下，这里用了Element Puls中的文本域标签，且有一个img标签，如果pasteImg有值就显示对于的图片

<template>
<div>
  <el-input
    v-model="textarea1"
    :rows="15"
    @paste="handlePaste"
    type="textarea"
    placeholder="Please input"
  />
  <img v-if="pasteImg" :src="pasteImg" style="width: 200px;height: 200px;" alt="">
</div>
</template>

逻辑代码

<script setup lang="ts">
import { ref } from 'vue';

const textarea1 = ref('')
const pasteImg = ref('')
const handlePaste = (event: ClipboardEvent) => {
      // 获取剪切板的内容，各个浏览器可能存在差异
      const items = (event.clipboardData || event.originalEvent.clipboardData).items;
      // console.log(items,123);
      for (const item of items) {
        // 剪切板数据是一个对象，遍历剪切板的对象，获取到图片格式的文件，进一步处理
        if (item.type.indexOf('image') !== -1) {
          const file = item.getAsFile();
          const reader = new FileReader();
          console.log(file,reader);
          reader.onload = (e) => {
            // 获取到图片，并将图片地址赋值给img标签中
            pasteImg.value = e.target?.result as string
          };
           // 读取粘贴的图片数据
           reader.readAsDataURL(file)
        }
      }
    };
</script>

最终效果，且粘贴文字并不会触发对应的效果