前端用js实现粘贴图片实现上传图片功能

引入实现粘贴复制功能的外部js文件

// 引入复制的外部js文件
<script src="https://cdn.jsdelivr.net/npm/[e-mail]/dist/clipboard.min.js"></script>

设置放置图片的盒子

// 给放置图片的盒子设置可编辑里面的内容的属性 contentEditable="true"
<div id="Msg" contentEditable="true" style="width: 200px; height:200px;border: 1px solid pink;"></div>

盒子不能是img，虽然可以回显 但是img标签不能实现复制功能；

监听粘贴事件 实现上传功能 粘贴即上传

  // 上传图片
   document.getElementById('Msg').addEventListener('paste', function (e) {
     if (!(e.clipboardData && e.clipboardData.items)) {
       return;
     }
     for (var i = 0, len = e.clipboardData.items.length; i < len; i++) {
       var item = e.clipboardData.items[i];
       console.log(item);
       if (item.kind === "string") {
         item.getAsString(function (str) {
           console.log(str);
           layer.msg("请粘贴图片上传", {
             icon: 2,
             shade: [0.3, '#000'],
             offset: '15px',
             time: 1000
           })
         })
         $("#Msg").html(""); //jQuery方法一
       } else if (item.kind === "file") {
         var blob = item.getAsFile();
         console.log(blob);
         if (blob.size === 0) {
           return;
         }
         var data = new FormData();
         data.append("image", blob);
         $.ajax({
           url: layui.setter.commUrl + "Requirement/zg_image?access_token=" + localStorage.getItem(
             'access_token') + "&id=" + $("#id").val(),
           type: 'POST',
           cache: false,
           data: data,
           processData: false,
           contentType: false,
           success: function (result) {
             console.log(result);
             if (result.code == "0") {
               console.log(result.msg)
               var html = "<img src=" + result.data + " width='100' height='100'>";
               $("#Msg").html(html);
             } else {
               console.log(result.msg)
             }
           }
         });
       }
     }
   });

实现效果截图

打印出上传接口返回的结果；