vue +elementUI实现粘贴复制上传

最新推荐文章于 2024-08-28 14:18:49 发布

桔子juju

最新推荐文章于 2024-08-28 14:18:49 发布

阅读量3.9k

点赞数 5

分类专栏： vue 文章标签： javascript vue.js html

本文链接：https://blog.csdn.net/ajujuju/article/details/112217431

版权

本文介绍如何使用 Vue 和 ElementUI 实现通过复制粘贴上传图片的功能。由于Windows系统限制，无法粘贴文件，仅支持截图和网页复制的图片。文章详细讲解了监听粘贴事件并调用上传组件的方法，以及针对IE浏览器的特殊处理。

摘要由CSDN通过智能技术生成

事情是这样的，有一个功能是想实现复制+粘贴图片上传。刚开始觉得这简直so easy啊！但往往现实是很骨感的，开发过程中发现windows系统文件是粘贴的不了的，网上查阅了很多也没有解决的办法。所以提前说好啊，只能粘贴截图和网页上右键1复制的图片。想要粘贴系统文件可以关了。不过您要是能粘贴系统文件麻烦请赐教，感激不尽https://blog.csdn.net/ajujuju/article/details/108119458

话不多少，整吧！

说下思路

监听粘贴事件，然后调用element的文件上传组件的上传方法。其实就想用现成的。如果自己写一个上传也不费劲，就监听到复制的文件就行了，然后调用自己上传的方法。

先来张截图
在这里插入图片描述

html代码
这里边有一个 <div id="tar_box" contenteditable=""></div>这个必须写上，不然ie不好使。IE就是必须监听一个输入框或者可编辑的组件才可以


```html
<template>
  <div class="home" @click="resetColor()" v-loading="loading">
    <div class="up-bg" @click.stop="setColor" :style="{'borderColor':color}">
      <div id="tar_box" contenteditable=""></div>
      <div>
        <el-upload
          ref="upload"
          class="upload-demo"
          :on-success="handleAvatarSuccess"
          action="上传地址"
          :before-upload="beforeUpload"
          :show-file-list="false"
          multiple
        >
          <el-button size="small" type="text" style="font-size: 14px;padding-bottom: 14px;">点击上传</el-button>
        </el-upload>
      </div>
    </div>
    <div style="height: 200px;background: red" contenteditable=''></div>
    <div class="imgList">
      <div v-for="(item,index) in imgList" class="img-item">
        <i class="el-icon-circle-close delete-icon" @click="deletePic(index)"></i>
        <img :src="item.fullUrl" >
      </div>
    </div>
  </div>
</template>

js部分
这部分是监听复制粘贴事件
我写在了mounted里面。里边具体的实现也是百度的，忘了在哪看的了，等找到了上链接
找到了：
添加链接描述

  mounted() {
   
        let _this = this;
        document.addEventListener('paste', function (event) {
   
            let isChrome = false;
            if (event.clipboardData || event.originalEvent) {
   
                //not for ie11  某些chrome版本使用的是event.originalEvent
                let clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
                if (clipboardData.items) {
   
                    // for chrome
                    let items = clipboardData.items,
                        len = items.length,
                        blob = null;
                    isChrome = true;
                    //items.length比较有意思，初步判断是根据mime类型来的，即有几种mime类型，长度就是几ÿ