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();
    })
    el.addEventListener('dragover',function(event){
      event.stopPropagation();
      event.preventDefault();
    })
    el.addEventListener('dragleave',function(event){
      event.stopPropagation();
      event.preventDefault();
    })
    el.addEventListener('drop',function(event){ //这里阻止默认事件，并绑定事件的对象，用来在组件上返回事件对象
      event.stopPropagation();
      event.preventDefault();
      binding.value(event)
    })
  }
})//拖拽释放指令

//使用上很简单，绑定粘贴或拖拽时发生的事件
<div v-parse="handleParse" v-drag="handleParse"></div>

第二步就要在绑定的函数内通过event获取拖拽和粘贴进来的文件

 //其实拖拽事件和复制粘贴事件有一部分代码是重复所以可以合到一个方法写，这里就先分开写了
 handleDrag(e) { //本地拖拽上传时触发
        if(this.multi) {//multi是我从父组件传进来的一个值，主要是控制是否允许多图上传
          let files = []
          if (e.dataTransfer && e.dataTransfer.items) { //判断是否有拖拽进来的文件
            files = Array.from(e.dataTransfer.items) //将拖拽进来的items类数组对象，转成真正的数组
            files.map(i=> {
              this.upload(i.getAsFile())//遍历文件数组并上传，getAsFile方法是将拖拽进来的对象，转成真正的文件对象
            })
          }else {
            this.$message({
              type: 'warning',
              message: '至少选择一个图片文件'
            })
            return;
          }
        }else {
          if (e.dataTransfer && e.dataTransfer.items[0] && e.dataTransfer.items[0].type && e.dataTransfer.items[0].type.indexOf('image') > -1) { //这里就是判断是否有拖拽进来的文件且文件为图片格式
            let file = e.dataTransfer.items[0].getAsFile(); //获取文件
              this.upload(file) //单文件直接上传
          } else {
            this.$message({
              type: 'warning',
              message: '上传的文件必须为图片且无法拖拽微信截图'
            })
            return;
          }
        }
      }
      
      
     //微信截图上传图片时触发 
  handlePaste(e) { 
          let file = null
          if (e.clipboardData && e.clipboardData.items[0] && e.clipboardData.items[0].type && e.clipboardData.items[0].type.indexOf('image') > -1) { //这里就是判断是否有粘贴进来的文件且文件为图片格式
            file = e.clipboardData.items[0].getAsFile();
          }else {
            this.$message({
              type: 'warning',
              message: '上传的文件必须为图片且无法复制本地图片且无法同时复制多张图片'
            })
            return;
          }
          this.upload(file)
      },

以上就是复制粘贴及拖拽图片获取图片文件的方法 ，因为已经用在了项目内，用起来基本没有什么问题