实现截图上传功能

最新推荐文章于 2022-11-10 18:05:48 发布

superXiaoyun

最新推荐文章于 2022-11-10 18:05:48 发布

阅读量469

点赞数

分类专栏： vue upload 文章标签： Vue 剪贴板事件图片上传 FileReader dataURL

本文链接：https://blog.csdn.net/superXiaoyun/article/details/119004155

版权

vue 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

upload

1 篇文章 0 订阅

订阅专栏

视图层加 v-on:paste 事件

<div  v-on:paste="onPaste">
	
</div>

方法实现


// 监听粘贴操作
onPaste(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;
  }
  const reader = new FileReader();

  // 此时file就是我们的剪切板中的图片对象
  // 如果需要预览，可以执行下面代码
  // reader.onload = event => {
    // preview.innerHTML = `<img src="${event.target.result}">`;
  // };
  reader.readAsDataURL(file);
  this.uploadGoodsImage({file})  //此处为图片上传服务器方法
},