图片粘贴上传

<template>
  <div class="box">
  <div id="preview" style="align-items:center;justify-content:center;" class="box1" v-on:paste="handlePaste">
      <span>将图片按Ctrl+V 粘贴至此处</span>
  </div>
  <button
        v-on:click="uploadPlans"
      >上传文件</button>
      <button @click="deleteImg">删除</button>
</div>  

</template>
<script>
export default {
  name: 'ScreenShot',
  data() {
    return {
      event:null
    }
  },

  methods: {
     // 监听粘贴操作
    handlePaste(event) {
      console.log(event,'event')
      const items = (event.clipboardData || window.clipboardData).items;
      console.log(event.clipboardData,window.clipboardData,'sddasda')
      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;
        }
      }
      console.log(file,'file')
      if (!file) {
        this.$message.error("粘贴内容非图片");
        return;
      }
      // 此时file就是我们的剪切板中的图片对象
      // 如果需要预览，可以执行下面代码
      const reader = new FileReader();
      reader.onload = event => {
        preview.innerHTML = `<img id='imgss' style='width: 300px;height: 300px;' src="${event.target.result}">`;
      };
      reader.readAsDataURL(file);
      this.file = file;
    },
    // 删除
    deleteImg(){
      document.getElementById('imgss').remove()
      document.getElementById('preview').innerHTML=`<span>将图片按Ctrl+V 粘贴至此处</span>`
    },  
    // 上传文件成功后回调
     uploadPlans() {
      let file = this.file;
      console.log(file,'323232')
      console.log(this.type,'this.type')
      if (!file) {
        this.$message.error("请粘贴图片后上传");
        return;
      }
      this.loading = true;
      let 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(() => {});
    },

  }
}
</script>
<style scoped>
.box1{
  width: 300px;
  height: 300px;
  border: 2px dashed  #000000;
  border-radius: 5px;
  display: flex;
}

</style>