截图粘贴上传图片

截图粘贴上传图片

通过截图后，将图片按Ctrl+V 粘贴上传

• paste事件就是粘贴事件
• 需要通过clipboardData获得粘贴的内容

<template>
  <div>
    <!-- <el-input @paste.native="pasteImg($event)" v-model="value"> </el-input>
    <el-button @click="handleChange">上传图片</el-button> -->
    <div>---------------------------------------------------</div>
    <div class="box">
      <div id="preview" v-on:paste="handlePaste">
        <span>将图片按Ctrl+V 粘贴至此处</span>
      </div>
      <el-button v-on:click="uploadPlans">上传文件</el-button>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  mounted() {},
  data() {
    return {
      value: '',
      canUpload: true,
      fileList: [],
      file1: ''
    }
  },
  methods: {
    // 监听粘贴操作
    handlePaste(event) {
      const items = (event.clipboardData || window.clipboardData).items
      let file = null

      if (!items || items.length === 0) {
        this.$message.error('当前浏览器不支持本地')
        return
      }
      // 搜索剪切板items
      for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf('image') !== -1) {
          file = items[i].getAsFile()
          break
        }
      }
      if (!file) {
        this.$message.error('粘贴内容非图片')
        return
      }
      // 此时file就是我们的剪切板中的图片对象
      // 如果需要预览，可以执行下面代码
      const reader = new FileReader()
      //   const preview = null
      var preview = document.getElementById('preview')
      reader.onload = event => {
        preview.innerHTML = `<img src="${event.target.result}">`
      }
      console.log(555, preview)
      reader.readAsDataURL(file)
      this.file1 = file
    },
    // 上传文件成功后回调
    uploadPlans() {
      const file = this.file1
      console.log(777, file)
      if (!file) {
        this.$message.error('请粘贴图片后上传')
        return
      }
      this.loading = true
      const form = new FormData()
      form.append('file', file)
      form.append('type', this.type)
      // uploadCertificate是封装的axios请求，自己根据需求传参
      //   uploadCertificate(form)
      //     .then(data => {
      //       if (data.data && data.data.success) {
      //         this.certificate_pic = data.data.data.source
      //         this.$message.success(this.name + '上传成功！')
      //       } else {
      //         this.$message.error(this.name + '上传失败！')
      //       }
      //     })
      //     .catch(() => {})
    }

    // pasteImg(event) {
    //   // 粘贴上传图片
    //   const txt = event.clipboardData.getData('Text')
    //   if (typeof txt === 'string' && txt !== '') {
    //     // 检测到是文字，过滤
    //     return
    //   }
    //   let file = null
    //   const items = (event.clipboardData || window.clipboardData).items
    //   console.log(111, items)
    //   if (items.length) {
    //     for (let i = 0; i < items.length; i++) {
    //       if (items[i].type.indexOf('image') !== -1) {
    //         file = items[i].getAsFile()
    //         console.log(444, file)
    //         // this.handleChange(file)
    //         if (!this.canUpload) {
    //           this.canUpload = !this.canUpload
    //           console.log(33, this.canUpload)
    //         }
    //         break
    //       }
    //     }
    //   }
    // },
    // // 图片上传
    // handleChange(file) {
    //   const formData = new FormData()
    //   formData.append('file', file.raw || file)
    //   console.log('上传接口', formData)
    //   //   this.postUrl('/www/upload/upload_img', formData).then(
    //   //     response => {
    //   //       this.fileList.push(response.data)
    //   //       console.log(this.fileList)
    //   //     },
    //   //     error => {
    //   //       console.log(error)
    //   //     }
    //   //   )
    // }
  }
}
</script>