js实现复制图片或截图粘贴到输入框直接上传

第一步，实现图片粘贴到输入框

当截图或者复制一张图片时，是不能直接粘贴到普通input框的，但是HTML提供了一个contenteditable属性，将该属性设置为true时，任何元素都可以编辑，因此可将一个div标签设置contenteditable=true，此时再调整成自己需要的input框样式，即可模拟一个可粘贴任何格式的input框

<div contenteditable id="past-contener">
  This text can be edited by the user.
</div>

第二步，通过监听paste事件获取文件数据，实现粘贴即上传

      const el = document.getElementById('past-contener');
      //此事件监听也可以添加在document上，该事件会有冒泡行为，则本页面上任何地方的粘贴操作都会触发
      el.addEventListener('paste', function(e){
        let file = null;
        const items = (e.clipboardData || window.clipboardData).items;
        if (items && items.length) {
          for (var i = 0; i < items.length; i++) {
            if (items[i].type.includes('image')) {
              file = items[i].getAsFile();
              break;
            }
          }
        }
        if (file) {
          console.log(file);
          // 此时获取到file文件对象，即可处理上传相关逻辑
        }
       });