vue上传图片+粘贴图片两种方式切换

1.功能需求

点击切换是上传还是粘贴图片，并且在切换的时候清除对应的上传文件数据，如下图所示

2.实现思路

两个盒子，通过radio的值实现两者的切换，this指定数据大家自己在data里面添加即可

1.本地上传

利用element ui 的上传组件实现，保证一次只能上传一个图片，并且通过表单提交，代码如下：

<div v-show="radio === 1">
  <el-upload
     :class="{ disable: fileList }"
     action=""
     list-type="picture-card"
     :http-request="fileUpload"
     :on-remove="handleRemove"
   >
     <i class="el-icon-plus"></i>
  </el-upload>
</div>
// disable类名：在上传了一个文件以后将上传按钮隐藏，通过css样式
.disable {
  ::v-deep .el-upload--picture-card {
    display: none !important;
  }
}


// 移除文件事件
 handleRemove(file, fileList) {
    this.fileList = ""; // 文件移除上传按钮显示
 },
// 自定义上传事件，后续通过请求接口上传
 fileUpload(param) {
    //   console.log(param);
    this.fileList = param.file;
},

2.复制粘贴上传

后面复制的会覆盖前面的文件，并且控制图片的展示大小(等比例缩放)，通过监听复制粘贴事件来实现，代码如下：

<div v-show="radio === 2">
   <div id="preview" class="pase-div" v-on:paste="handlePaste">
       <span>将图片按Ctrl+V 粘贴至此处</span>
   </div>
</div>
// css样式
.pase-div {
  width: 95%;
  min-height: 40px;
  border: 1px dashed #c0ccda;
  text-align: center;
}


 // 监听粘贴操作
 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 id="pase-img" src="${event.target.result}" style="width: 100%">`; // 添加style样式保证图片等比缩放
      };
      reader.readAsDataURL(file);
      this.pasteFile = file;
},

3.两者之间的切换实现

在切换radio的时候，去删除对应的节点和将数据置空，代码如下：

<el-radio-group v-model="radio" @change="changeRadio">
   <el-radio :label="1">本地上传</el-radio>
   <el-radio :label="2">粘贴上传</el-radio>
</el-radio-group>



// 改变图片上传方式---改变radio
changeRadio(val) {
   if (val === 1) {
     let node = document.getElementById("pase-img"); // 给添加的节点设置id，对应上图
     if (node) {
        let preview = document.getElementById("preview");
        preview.removeChild(node);
        preview.innerHTML = `<span>将图片按Ctrl+V 粘贴至此处</span>`;
        return;
       }
    } else {
       // 这里获取的是ul里面的li，否则在下次添加的时候由于ul节点被删除，无法再次添加图片
       let ulNode = document.getElementsByClassName("el-upload-list__item")[0]; 
       // console.log(ulNode);
        if (ulNode) {
        ulNode.parentNode.removeChild(ulNode);
        this.fileList = "";
        return;
       }
   }
},

4.参考来源

vue实现粘贴截图上传图片_jaysj的博客-CSDN博客_vue 粘贴图片

5.总结

对应的代码在上面，大家在需要的位置进行添加即可，也可根据需求去做调整，实现的思路应该有很多，大家如果有更好的实现方式欢迎在下方留言~~。