js获取剪切板中的文件

1,016 阅读1分钟

代码如下:

<script>
import { onMounted } from 'vue'
export default {
    setup(){
        onMounted(()=>{
          document.addEventListener("paste", function (e) {
              var cbd = e.clipboardData

              // 如果是 Safari 直接 return
              if ( !(e.clipboardData && e.clipboardData.items) ) {
                  return
              }
              const fileArr = []
              for(var i = 0; i < cbd.items.length; i++) {
               var item = cbd.items[i]
               if(item.kind == "file"){
                 var blob = item.getAsFile();
                 if (blob.size === 0) {
                    return
                 }
                 // blob 就是从剪切板获得的文件 可以进行上传或其他操作
                 fileArr.push(blob) //将获取的到文件添加到集合中
                 blobToDataURL(blob, (base64Url) => {
                    console.log(base64Url)//将图片转成base64便于展示
                 })
               }
              }
              console.log(fileArr)
          }, false); 
         })
    }
}
</script>

效果fileArr

image.png