记录点击按钮触发粘贴图片、文本框ctrlV粘贴事件

效果截图：

1、文本框cv粘贴图片事件

2、点击按钮获取粘贴板内容，目前有个问题，只可以获取到截图工具的截图，系统图片鼠标右键复制、ctrlC，粘贴板获取不到图片数据

伪代码：

<template>
  <div style="padding: 20px">
    <div style="margin: 20px">
      <el-button @click="showUploadDialog = true">ctrl+v粘贴图片</el-button>
    </div>
    <div style="margin: 20px">
      <el-button @click="handlePasteClick">点击按钮触发粘贴</el-button>
      <el-image
        v-if="imgSrc"
        style="margin-left: 20px"
        :src="imgSrc"
        alt="粘贴的图片"
      ></el-image>
    </div>
    <el-dialog title="上传图片" width="520px" :visible.sync="showUploadDialog">
      <div class="upload-box">
        <ul v-show="uploadPicList.length" class="ul-box">
          <li
            v-for="(item, index) in uploadPicList"
            :key="item.pictureId"
            class="img-box"
          >
            <el-image
              fit="cover"
              style="width: 100%; height: 100%"
              :src="item.pictureSrc"
            >
            </el-image>
            <div class="search" @click.stop="showUploadViewer(index)">
              <i class="iconfont iconsousuo"></i>
            </div>
            <div class="delete">
              <i
                class="iconfont icondanchuangguanbi"
                @click.stop="deletePic(item)"
              ></i>
            </div>
            <div class="filter"></div>
          </li>
        </ul>
        <div class="upload-textarea" @paste="handlePaste">
          <el-input
            style="width: 100%"
            :autosize="{ minRows: 5, maxRows: 5 }"
            type="textarea"
            resize="none"
          >
          </el-input>
          <p class="text-tips">将图片按Ctrl + V 粘贴</p>
        </div>
        <p class="tips">
          请上传相关文件，可上传多个，仅支持 png 或者 jpg 格式。
        </p>
      </div>
      <div slot="footer">
        <el-button @click="onCancel">取消</el-button>
        <el-button @click="onConfirm" type="primary" :disabled="uploadDisabled"
          >确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //图片上传相关
      showUploadDialog: false,
      showUploadBtn: false,
      uploadPicList: [],
      currentRow: null,
      uploadDisabled: false,
      showViewer: false,
      initialIndex: 0,
      urlList: [],
      imgSrc: "",
    };
  },
  methods: {
    //点击按钮触发粘贴
    async handlePasteClick(operationType) {
      try {
        const clipboardItems = await navigator.clipboard.read();
        for (const clipboardItem of clipboardItems) {
          for (const type of clipboardItem.types) {
            if (type.startsWith("image/")) {
              const blob = await clipboardItem.getType(type);
              const imageURL = URL.createObjectURL(blob);
              // 将图片数据赋值给 <img> 元素的 src 属性
              this.imgSrc = imageURL;
              //后面这里拿到file对象调后台接口上传图片
              // const file = new File([blob], "image.png", { type: blob.type });
              // this.uploadFile({ file: file }, operationType);
            }
          }
        }
      } catch (error) {
        console.error(error);
        this.$message.error("粘贴图片失败");
      }
    },
    //文本框的粘贴事件
    handlePaste(event) {
      if (event.clipboardData.getData("text/plain")) {
        return;
      }
      const items = (event.clipboardData || window.clipboardData).items;
      event.preventDefault();
      event.returnValue = false;
      let file = null;
      if (!items || items.length === 0) {
        this.$message.warning("当前不支持本地图片上传");
        return;
      }
      //搜索剪切板items
      for (let i = 0; i < items.length; i++) {
        if (items[i].type.includes("image")) {
          file = items[i].getAsFile();
          break;
        }
      }
      if (!file) {
        this.$message.warning("仅支持单张图片");
        return;
      }
      // this.uploadFile({ file: file });
    },
    /*自定义上传方法*/
    uploadFile(file) {
      let uploadPicList = this.uploadPicList;
      if (uploadPicList.length >= 5) {
        this.$message.error("上传图片数量超过5张，请处理后重新上传");
        return false;
      }
      let params = {
        baseFileUrl: this.baseFileUrl,
        type: "project",
        directoryName:
          new Date().getFullYear() +
          "/" +
          (new Date().getMonth() + 1) +
          "/" +
          new Date().getDate(),
        token: this.getToken(),
      };
      file.name = file.file.name;
      file.relativePath = file.file.webkitRelativePath;
      uploadFileApi(params, file).then((res) => {
        if (res.status === 200) {
          const data = res.data;
          let obj = {
            pictureSrc: data.downloadUrl,
            pictureId: data.id,
          };
          this.uploadPicList.push(obj);
        } else {
          this.$message({
            type: "error",
            message: "文件上传失败",
          });
        }
      });
    },
    //上传图片弹窗的预览
    showUploadViewer(index) {
      this.initialIndex = index;
      this.urlList = this.previewSrcList;
      this.$nextTick(() => {
        this.showViewer = true;
      });
    },
    deletePic(item) {
      const list = this.uploadPicList;
      const index = list.findIndex((el) => el.pictureId === item.pictureId);
      if (index !== -1) {
        this.uploadPicList.splice(index, 1);
      }
    },
    onCancel() {
      this.uploadPicList = [];
      this.showUploadDialog = false;
    },
    // 上传图片确定
    onConfirm() {
      const params = {
        id: this.currentRow.id,
        pictureIds: this.uploadPicList.map((el) => el.pictureId).join(","),
      };
      this.uploadDisabled = true;
      this.$API.dicDisposeTaskV2
        .updatePictureV2(params)
        .then((res) => {
          if (res.status === 200) {
            this.$message.success(res.message);
            this.getFormInfoDetailHandle();
            this.showUploadDialog = false;
          }
        })
        .finally(() => {
          this.uploadDisabled = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.upload-box {

  .img-box {
    position: relative;
    border-radius: 2px;
    width: 57px;
    height: 30px;

    &:hover {
      .icon-box,
      .filter {
        display: block;
      }
    }
  }

  .filter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(26, 36, 45, 0.4);
    backdrop-filter: blur(1px);
    display: none;
  }

  .icon-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    cursor: pointer;
    padding: 0 6px;
    z-index: 10;
    display: none;

    .iconfont {
      color: #fff;
    }
  }

  .el-button {
    flex: 0 0 40px;
    text-align: right;
  }
}
.el-dialog__wrapper .upload-textarea {
  margin-top: 20px;
  width: 100%;
  border-radius: 4px;
  position: relative;
}

.el-dialog__wrapper .upload-textarea .text-tips {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  font-size: 12px;
  line-height: 17px;
  color: #777e8c;
  font-weight: 500;
}

.el-dialog__wrapper .tips {
  margin-top: 10px;
  font-size: 12px;
  line-height: 17px;
  color: #777e8c;
  font-weight: 400;
}
 .el-dialog__wrapper .ul-box{
    display: flex;
    align-items: center
}

 .el-dialog__wrapper .ul-box .img-box {
    width: 57px;
    height: 30px;
    margin-right: 10px;
    border-radius: 2px;
    position: relative
}
</style>