vue实现粘贴截图上传图片

vue实现粘贴截图上传图片

当初提出这个需求的时候，可把我难住了，在网上各种搜索，大多数都是利用富文本的粘贴功能，但是富文本大多都有工具栏，想偷懒的我就放弃了😁。代码如下(已做精简)！

html

<div class="box">
  <div id="preview" v-on:paste="handlePaste">
      <span>将图片按Ctrl+V 粘贴至此处</span>
  </div>
  <el-button
        v-on:click="uploadPlans"
      >上传文件</el-button>
</div>  

js

 // 监听粘贴操作
    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();
      reader.onload = event => {
        preview.innerHTML = `<img src="${event.target.result}">`;
      };
      reader.readAsDataURL(file);
      this.file = file;
    },
    //上传文件成功后回调
     uploadPlans() {
      let file = this.file;
      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(() => {});
    },

这只是最基本的功能实现代码，自己酌情添加需求即可。完成结果如下，仅仅支持截图上传，如qq、微信、钉钉等应用截图后直接粘贴即可。