有的时候,我们可能想要提取data:image/png;base64,后面的内容
参考资料:
Vue 用“,”分割,遍历数组_vue以第一个数字分割-CSDN博客
先定义数组,定义一个数组将字符串切割的内容给装进去
具体代码:
<template> <h2>复制或剪切图片后以ctrl + V 粘贴</h2> <img id="img" src="" alt=""> </template> <script> export default { methods: { setPasteImg(){ //粘贴事件 document.addEventListener('paste', function(event){ if (event.clipboardData || event.originalEvent) { var clipboardData = (event.clipboardData || event.originalEvent.clipboardData); if(clipboardData.items){ var blob; for (var i = 0; i < clipboardData.items.length; i++) { if (clipboardData.items[i].type.indexOf("image") !== -1) { blob = clipboardData.items[i].getAsFile(); } } var render = new FileReader(); render.onload = function (evt) { //输出base64编码 var base64 = evt.target.result; // console.log(base64); // arr = base64.split(','); // console.log(base64); console.log(base64.split(',')); var imgArr = []; imgArr = base64.split(',') console.log(imgArr[0]); console.log(imgArr[1]) // var imgArr = []; // imgArr = base64.split(',') // console.log(imgArr[0]); // console.log(array[0]); document.getElementById('img').setAttribute('src',base64); } render.readAsDataURL(blob); } } }) } }, mounted(){ this.setPasteImg() } } </script> <style> #img{ width: 800px; box-shadow: 0 0 5px blue; } </style>
效果:前后字段分开