【没事干】之 input粘贴截图或文件

1.可以用哦

<input @paste="paste($event)"/>   //vue

<input id="testIpt" />   //原生
document.getElementById("testIpt).addEventListener("paste",paste)

paste(e) {
        //这里你有可能复制了多个文件或图片
      e.clipboardData && e.clipboardData.items.forEach(item => {
          //这个是文字类型的复制，系统默认填充
        // if (item.kind.indexOf('string') > -1) {
        //   var string = item.getAsString(function (res) {
        //     _this.editMsg += res
        //   });
        //   e.preventDefault()
        //   return
        // }
        
        //判断是否是粘贴图片
        if (e.clipboardData && item.kind.indexOf('file') > -1) {
          var _this = this,
            reader = new FileReader(),
            file = item.getAsFile();
          console.log(file)
          //ajax上传图片
          reader.onload = function (e) {
            _this.fileLoading = true
            const formData = new FormData()
            formData.append('file', file)
            const ajax = new XMLHttpRequest()
            ajax.open('POST', '/api/upload', true)
            ajax.setRequestHeader('token', _this.$store.state.userInfo.token)
            ajax.send(formData)
            ajax.onreadystatechange = function () {
              if (ajax.readyState === 4) {
                if ((ajax.status >= 200 && ajax.status < 300) || ajax.status === 304) {
                  _this.fileLoading = false
                  const obj = JSON.parse(ajax.responseText)
                  if (obj.code && obj.code === 200) {
                    if (obj.data.type.indexOf("image") > -1)
                      _this.editMsg += '<img src="' + obj.data.url + '" alt="" onclick=\'previewImg(' + JSON.stringify(obj.data.url) + ')\'  onload="chatImgLoad()"/>'
                    else {
                      _this.editMsg += '<a target="_blank" href="' + obj.data.url + '" alt="">[文件]' + file.name + '</a>'
                    }
                  }
                }
              }
            }
          }
          reader.readAsBinaryString(file);
        }
      })
    }
    ```