需求

后台管理在上传图片地方需要将复制的图片粘贴上传


一、添加事件

在原有上传组件的基础上添加 paste事件

在这里插入图片描述

二、方法

 onPaste(e) {
      const items = (e.clipboardData || window.clipboardData).items;
      let blob = null;
      for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf("image") === 0) {
          blob = items[i].getAsFile();
        }
      }
      if (blob !== null) {
      	//粘贴的内容是图片  这里我调用了组件的上传图片的方法  blob就是粘贴的图片
        this.beforeUpload(blob,2);
      }
    },

后面就是上传组件的事件,这里就不详细写了,但是用粘贴的时候不会触发上传组件的上传方法,所以需要手动调用

三、实现

实现效果图:
在这里插入图片描述
paste事件必须选中添加事件的框才能触发,所以我这里加了先点击文字,文字在框里就可以触发事件


总结

这个粘贴图片的功能还可以用在别的地方,主要是用paste事件拿到图片,后面的操作都可以根据自己的需求实现

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐