当前位置：首页 > news >正文

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

news 2025/7/7 3:19:21

要在 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"><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div></el-upload></div>
</template>

<script>
import { Upload } from 'element-ui';export default {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>

HTML部分：使用 el-upload 组件创建一个拖拽上传区域。
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"><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div></el-upload><!-- 显示上传后的文件 --><div v-for="(file, index) in fileList" :key="index" class="uploaded-file"><div v-if="isImage(file.name)"><img :src="file.url" alt="Uploaded Image" class="uploaded-image" /><el-button type="text" @click="removeFile(index)">移除</el-button></div><div v-else><span>{{ file.name }}</span><el-button type="text" @click="removeFile(index)">移除</el-button></div></div></div>
</template>

<script>
import { Upload } from 'element-ui';export default {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 = new FileReader();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>