vue中实现拖拽，复制粘贴操作获取上传图片

拖拽，复制粘贴操作获取图片

因为最近项目需要实现一个图片组件，包含压缩，拖拽上传，复制上传，图片裁剪，兼容多图和单图上传功能，好像这类组件也比较少，所以自己就封装了一个，连带着相关知识也熟悉了。这里分开几篇写，下面说一下图片拖拽，复制粘贴获取文件

• 首先复制粘贴是只支持微信qq或者钉钉上的截图的，而本地文件是不支持的,且复制粘贴不支持同时上传多张
• 其次拖拽上传支持本地的文件，不支持截图的拖拽

下面是实现代码

---

第一步，因为我用的是vue,所以首先要声明两个自定义的指令，分别是用来监听元素上的粘贴和拖拽事件的

Vue.directive('paste',{
   
  bind(el,binding,vnode) {
   
    el.addEventListener('paste',function(event){
    //这里直接监听元素的粘贴事件
      binding.value(event)
    })
  }
})//复制粘贴指令


Vue.directive('drag',{
   
  bind(el,binding,vnode) {
   
   //因为拖拽还包括拖动时的经过事件，离开事件，和进入事件，放下事件，浏览器对于拖拽的默认事件的处理是打开拖进来的资源，所以要先对这三个事件进行默认事件的禁止
    el.addEventListener('dragenter',function(event){
    
      event.stopPropagation();
      event.preventDefault();
    })