JS实现复制截图，自动显示图片，并上传图片到后端，源码自取

document.addEventListener('paste', (event) => {
  console.log('粘贴事件', event)
});

<div>
  <textarea id="mytextarea"></textarea>
</div>
<script type="text/javascript">
  document.querySelector("#mytextarea").addEventListener('paste', function (event) {
    console.log(event)
  })
</script>

<div class="container" style="text-align: center;">
  <textarea id="mytextarea"></textarea>
  <img id="myimg" width="200px" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1971621943,955938305&fm=26&gp=0.jpg" />
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
  document.querySelector("#mytextarea").addEventListener('paste', function (event) {
    var items = event.clipboardData.items;
    console.log(items[0], items[1])

    if (items && (items[0].type.indexOf('image') > -1 )) {
      var file = null // 用于存储图片文件
      file = items[0].getAsFile();
      console.log(file)

      // 直接显示到当前页面
      document.querySelector('#myimg').src = URL.createObjectURL(file)

      // 发送http请求到后端
      let sendData = new FormData()
      sendData.append('editormd-image-file', file)

      _ajax('https://www.ebaina.com/markdown/upload?guid=1607782819184', sendData, function (res) {
        console.log(res)
      })
    }
  })

  var _ajax = function (url, data, callback) {
    $.ajax({
      "type": 'post',
      "cache": false,
      "url": url,
      "data": data,
      "processData": false,
      contentType: "multipart/form-data; boundary=----WebKitFormBoundaryjtVDWJU59uHZpWAy",
      success: function (ret) {
        callback(ret);
      },
      error: function (err) {
        console.log('请求失败')
      }
    })
  }
</script>

let sendData = new FormData()
sendData.append('editormd-image-file', file)