使用Element UI实现一个拖拽图片上传，并可以Ctrl + V获取图片实现文件上传

要在 Element UI 的拖拽上传组件中实现 Ctrl + V 图片上传功能，可以通过监听键盘事件来捕获粘贴操作，并将粘贴的图片数据上传到服务器。

版本V1，实现获取粘贴板中的文件

注意，本案例需要再你已经安装了Element UI并在项目中正确配置的情况下进行，第一个版本仅适合上传jpeg和png的图片

创建拖拽上传组件
假设你已经有一个基本的拖拽上传组件，我们可以在此基础上添加 Ctrl + V 功能。

监听粘贴事件
我们需要在页面中监听 paste 事件，当用户按下 Ctrl + V 时，捕获粘贴板中的图片数据。

处理粘贴事件

在捕获到图片数据后，将其转换为 File 对象，并调用上传方法。

代码如下：

<template><div><el-uploaddragaction="https://jsonplaceholder.typicode.com/posts/":on-preview="handlePreview":on-remove="handleRemove":before-upload="beforeUpload"multipleref="upload"><iclass="el-icon-upload"></i><divclass="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><divclass="el-upload__tip"slot="tip">只能上传jpg/png文件，且不超过500kb</div></el-upload></div></template>

<script>import{ Upload }from'element-ui';exportdefault{
  name:'DragUpload',
  methods:{handlePaste(event){// 捕获粘贴事件const items = event.clipboardData.items;for(let i =0; i < items.length; i++){if(items[i].type.indexOf('image')!==-1){// 获取图片文件const file = items[i].getAsFile();this.handleFile(file);break;}}},handleFile(file){// 将文件添加到上传队列this.$refs.upload.handleStart(file);this.$refs.upload.submit();},handlePreview(file){
      console.log('Preview:', file);},handleRemove(file, fileList){
      console.log('Remove:', file, fileList);},beforeUpload(file){const isJPGorPNG = file.type ==='image/jpeg'|| file.type ==='image/png';const isLt500K = file.size /1024<500;if(!isJPGorPNG){this.$message.error('只能上传 JPG/PNG 格式的图片!');}if(!isLt500K){this.$message.error('图片大小不能超过 500KB!');}return isJPGorPNG && isLt500K;}},mounted(){// 监听粘贴事件
    document.addEventListener('paste',this.handlePaste);},beforeDestroy(){// 移除粘贴事件监听
    document.removeEventListener('paste',this.handlePaste);}};</script>

1. HTML部分：使用 el-upload 组件创建一个拖拽上传区域。
2. JavaScript部分： - handlePaste 方法：捕获粘贴事件，检查粘贴板中的数据是否为图片文件，如果是，则调用 handleFile 方法。- handleFile 方法：将图片文件添加到上传队列，并提交上传。- mounted 生命周期钩子：添加粘贴事件监听器。- beforeDestroy 生命周期钩子：移除粘贴事件监听器，防止内存泄漏。

随便截图一张，我们这个时候ctrl + v 就可以发现他可以获取我们粘贴板中的文件。

我们到这一步发现，图片网页是获取到。这个时候你在跟着你的业务，传递相关参数，这第V1版本就可以用了。

第二版本V2,可以直接在粘贴的过程在下面以压缩图片的形式展示图片

<template><div><el-uploaddrag:action="uploadFileUrl":on-preview="handlePreview":on-remove="handleRemove":before-upload="beforeUpload":on-success="handleSuccess"multipleref="upload":file-list="fileList"><iclass="el-icon-upload"></i><divclass="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><divclass="el-upload__tip"slot="tip">只能上传jpg/png文件，且不超过500kb</div></el-upload><!-- 显示上传后的文件 --><divv-for="(file, index) in fileList":key="index"class="uploaded-file"><divv-if="isImage(file.name)"><img:src="file.url"alt="Uploaded Image"class="uploaded-image"/><el-buttontype="text"@click="removeFile(index)">移除</el-button></div><divv-else><span>{{ file.name }}</span><el-buttontype="text"@click="removeFile(index)">移除</el-button></div></div></div></template>

<script>import{ Upload }from'element-ui';exportdefault{
  name:'DragUpload',data(){return{
      fileList:[]};},
  methods:{handlePaste(event){const items = event.clipboardData.items;for(let i =0; i < items.length; i++){if(items[i].type.indexOf('image')!==-1){const file = items[i].getAsFile();this.handleFile(file);break;}}},handleFile(file){const reader =newFileReader();
      reader.onload=(e)=>{this.fileList.push({
          name: file.name,
          url: e.target.result
        });};
      reader.readAsDataURL(file);this.$refs.upload.handleStart(file);this.$refs.upload.submit();},handlePreview(file){
      console.log('Preview:', file);},handleRemove(file, fileList){this.fileList = fileList;},beforeUpload(file){const isJPGorPNG = file.type ==='image/jpeg'|| file.type ==='image/png';const isLt500K = file.size /1024<500;if(!isJPGorPNG){this.$message.error('只能上传 JPG/PNG 格式的图片!');}if(!isLt500K){this.$message.error('图片大小不能超过 500KB!');}return isJPGorPNG && isLt500K;},handleSuccess(response, file, fileList){// 更新 fileListthis.fileList = fileList.map(f=>({
        name: f.name,
        url: f.url || f.response.url // 假设服务器返回的响应中有 url 字段}));},removeFile(index){this.fileList.splice(index,1);},isImage(fileName){return fileName.toLowerCase().endsWith('.jpg')|| fileName.toLowerCase().endsWith('.png');}},mounted(){
    document.addEventListener('paste',this.handlePaste);},beforeDestroy(){
    document.removeEventListener('paste',this.handlePaste);}};</script>

<style scoped>
.uploaded-file{margin-top: 10px;display: flex;align-items: center;}.uploaded-image{max-width: 100px;max-height: 100px;margin-right: 10px;}
</style>

如图所示。Ctrl + V就实现到了这一步。这里有问题，那就是你看一下，点击上传后的图片是否会显示出来呢？