js 处理粘贴事件并展示图片

前端不加班

已于 2022-09-15 10:31:23 修改

阅读量489

点赞数

文章标签： javascript 前端 typescript

于 2022-09-15 09:45:36 首次发布

本文链接：https://blog.csdn.net/m0_49515138/article/details/126864492

版权

 该案例是基于  vue3+ts   <script lang='ts' setup>  语法糖

    /* base64转file */
export function  dataURLtoFile(dataurl:any, filename:any) {
  var arr = dataurl.split(","),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, { type: mime });
}

                    <img
	                    :src="imageUrl"
	                    alt=""
	                    style="
	                      max-width: 100%;
	                      height: 100%;
	                      box-shadow: 1px 10px 1px #999;
	                    "
                    />

let ctrlvFlag = ref<boolean>(true);
let FileList = ref<fileList[]>([]);
let imageUrl = ref<string>("");

onBeforeUnmount(() => {
  document.removeEventListener("paste", handlectrlvEvent);
});
onMounted(() => {
  document.addEventListener("paste", handlectrlvEvent);
});

/* 处理粘贴事件 */
let handlectrlvEvent = (e: any) => {
  console.log(e);
  if (!ctrlvFlag) return;
  ctrlvFlag.value = false;
  // let arr = fileList;
  let imgs = FileList.value.map((item) => {
    return item.url;
  });
  let length = [...new Set(imgs)].length;
  // if (length >= limit) {
  //       this.$message.error(
  //         "上传图片超出限制，最大允许上传" + this.limit + "张图片"
  //       );
  //       this.ctrlvFlag = true;
  //       return;
  //     }
  let clipboardData = e.clipboardData;
  let items = clipboardData.items;
  let item = null;
  if (items && items.length) {
    for (let i = 0; i < clipboardData.types.length; i++) {
      if (clipboardData.types[i] === "Files") {
        item = items[i];
        break;
      }
    }
  }
  if (item && item.kind == "file" && item.type.match(/^image\//i)) {
    const reader = new FileReader();
    reader.readAsDataURL(item.getAsFile());
    reader.onload = () => {
      let name = Date.now();
      let file = dataURLtoFile(reader.result, name);
      console.log(typeof reader.result);

      FileList.value.push({ name: name, url: reader.result });

      uploadImage(file);//这个里面的file就是图片的信息   上传到文件服务器
      
    };
  }
};

获取上传到服务器上的图片
 imageUrl.value =
      "http://192.168.0.22:8005/file-1/file/resource/" + path + "/" + file.name;
      //展示

上面这个方法需要借助后台文件服务器

2.纯前端实现案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .div {
        width: 500px;
        height: 500px;
        margin: 60px auto;
        background-color: pink;
    }
    .div2 {
        width: 400px;
        height: 400px;
        margin: 0 auto;
        background-color: #fff;
    }
    p {
        text-align: center;
    }
    .img {
        width: auto;
        height: 100%;
        max-width: 100%;
    }
</style>
<body>
    <div>
        同时按住Windows+Print Screen组合键，笔记本则按住Windows+Prt Sc SysRq组合键，则能全屏截图，仅适用Windows系统。
    </div>
    <div id="div" class="div">
        <p>【Ctrl+v】粘贴图片试试</p>
        <div class="div2">
           <img id="img" src="" alt="" class="img" /> 
        </div>
    </div>

    <script>
        const div = document.getElementById("div")
        const img = document.getElementById("img")
        function handlepaste(e) {
            // 粘贴对象
            if (e.clipboardData || e.originalEvent) {
                const clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
                if (clipboardData.items) {
                    let blob;
                    for (let i = 0; i < clipboardData.items.length; i++) {
                        if (clipboardData.items[i].type.indexOf('image') !== -1) {
                            blob = clipboardData.items[i].getAsFile();
                        }
                    }

                    // 粘贴数据
                    console.log(blob, 'blob')

                    // 生成文件对象
                    const filer = new FileReader()
                    
                    // 将获取的粘贴数据转成 URL格式的字符串（base64编码）
                    filer.readAsDataURL(blob)
                    
                    // 这个回调在 filer.readAsDataURL(blob) 的时候触发
                    filer.onload = (e) => {
                        console.log(e, 'FileReader')
                        // 获取URL格式的字符串 Base64编码
                        const base64 = e.target.result;
                        console.log(base64, 'base64')
                        // 通过img输出
                        img.src = base64   //通过base64直接输出
                    };

                }
            }
        }
        

        div.addEventListener('paste', handlepaste)
    </script>
</body>
</html>