通过vue3点击事件来获取剪切板中的图片！

        由于 navigator.clipboard 方法受安全协议影响，只能在https、127.0.0.1或localhost等域名中使用，无法在http中来实现，为此找到了第二种方法；

        一种是使用了navigator.clipboard ，另一种是通过input；

第一种：

首先是html部分

<template>
  <div style="width: 100px;height: 100px;border: 1px solid #000;text-align: center;line-height: 100px;margin: 50px auto;">
    <img v-if="pastedImage" :src="pastedImage" style="width: 100%;height: 100%;" />
    <el-icon v-else class="avatar-uploader-icon" @click="add"><Plus /></el-icon>
  </div>
</template>

js部分

<script setup>
import { ref } from "vue";
import { Plus } from "@element-plus/icons-vue";
const pastedImage = ref("");
async function add() {
  try {
    const clipboardItems = await navigator.clipboard.read();
    for (const clipboardItem of clipboardItems) {
      for (const type of clipboardItem.types) {
        if (type === "image/png") {
          const blob = await clipboardItem.getType(type);
          pastedImage.value = URL.createObjectURL(blob);
          // console.log(pastedImage.value);
          return;
        }
      }
    }
    console.error("剪贴板中没有图片");
  } catch (error) {
    console.error("获取剪贴板图片失败:", error);
  }
}
</script>

第二种：// 此方法必须用户手动粘贴

首先html部分

<template>
  <div>
    <input id="pasteInput" @paste="handlePaste" placeholder="上传图片" />
    <div style="display: flex; margin-left: 15px">
      <div style="display: flex; flex-wrap: wrap">
        <div class="imgBox" v-for="(item, index) in list" :key="index">
          <img
            @click="adds(item.picSrc)"
            :src="item.picSrc"
            style="width: 100px; height: 100px; border-radius: 10px"
          />
          <div @click="del(index)" v-if="list.length" class="delgb">X</div>
        </div>
      </div>
      <div v-if="pastedImage" class="imgSrc">
        <img
          :src="pastedImage"
          alt=""
          style="width: 80%; height: 80%; margin-top: 80px"
        />
        <p @click="kong" class="imgSrcgb">X</p>
      </div>
    </div>
  </div>

js部分

const handlePaste = async (event) => {
  const items = (event.clipboardData || event.originalEvent.clipboardData)
    .items;
  for (const item of items) {
    if (item.type.indexOf("image") === 0) {
      const blob = item.getAsFile();
      if (blob) {
        // pastedImage.value = URL.createObjectURL(blob);
        // list.value.push(URL.createObjectURL(blob));
        const file = blob;
        const reader = new FileReader();
        reader.onload = (e) => {
          const imageData = e.target.result;
          let formData = new FormData();
          formData.append("file", blob);
          postUploadFile(formData).then((res) => {
            list.value.push({
              id: row_id.value,
              picSrc: res?.data.imgSrc,
              picId: res.data.fileid,
            });
            row_yjtpid.value = res.data.fileid;
            row_yjtpsrc.value = res.data.imgSrc;
            let id = list.value[0].id;
            let picSrc = "";
            let picId = "";
            for (let i = 0; i < list.value.length; i++) {
              picSrc += list.value[i].picSrc;
              picId += list.value[i].picId;
              if (i !== list.value.length - 1) {
                picSrc += ",";
                picId += ",";
              }
            }
            transformedData.value = { id: id, picSrc: picSrc, picId: picId };
            // console.log(transformedData);
            postSavePic(transformedData.value).then((res) => {
              // console.log(res);
            });
          });
        };
        reader.readAsDataURL(file);
        return;
        // break;
      }
    }else {
      ElMessage({
        message: '请先截图!',
        type: 'warning',
      })
      setTimeout(() =>{
        document.getElementById('pasteInput').value = ''
      })
      return;
      }
  }
};

const del = (e) => {
  list.value.splice(e, 1);
  // add();
  if (list.value.length) {
    let id = list.value[0].id;
    let picSrc = "";
    let picId = "";
    for (let i = 0; i < list.value.length; i++) {
      picSrc += list.value[i].picSrc;
      picId += list.value[i].picId;
      if (i !== list.value.length - 1) {
        picSrc += ",";
        picId += ",";
      }
    }
    transformedData.value = { id: id, picSrc: picSrc, picId: picId };
  } else {
    transformedData.value = { id: row_id.value, picSrc: "", picId: "" };
  }
  // console.log(transformedData);
  postSavePic(transformedData.value).then((res) => {
    // console.log(res);
  });
};
const adds = (e) => {
  pastedImage.value = e;
};
const kong = () => {
  pastedImage.value = "";
};

 css样式

<style lang="scss" scoped>
#pasteInput {
  color: #fff;
  width: 200px;
  height: 50px;
  outline: none;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  border-radius: 15px;
  border: 0 solid #000;
  background-color: blue;
  caret-color: rgba(255, 255, 255, .1);
}
input::-webkit-input-placeholder {
  color: #fff;
}
</style>