要在 Element UI 的拖拽上傳組件中實現(xiàn) Ctrl + V 圖片上傳功能，可以通過監(jiān)聽鍵盤事件來捕獲粘貼操作，并將粘貼的圖片數(shù)據(jù)上傳到服務(wù)器。

版本V1，實現(xiàn)獲取粘貼板中的文件

注意，本案例需要再你已經(jīng)安裝了Element UI并在項目中正確配置的情況下進行，第一個版本僅適合上傳jpeg和png的圖片

創(chuàng)建拖拽上傳組件
假設(shè)你已經(jīng)有一個基本的拖拽上傳組件，我們可以在此基礎(chǔ)上添加 Ctrl + V 功能。

監(jiān)聽粘貼事件
我們需要在頁面中監(jiān)聽 paste 事件，當用戶按下 Ctrl + V 時，捕獲粘貼板中的圖片數(shù)據(jù)。

處理粘貼事件

在捕獲到圖片數(shù)據(jù)后，將其轉(zhuǎn)換為 File 對象，并調(diào)用上傳方法。

代碼如下：

<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() {// 監(jiān)聽粘貼事件document.addEventListener('paste', this.handlePaste);},beforeDestroy() {// 移除粘貼事件監(jiān)聽document.removeEventListener('paste', this.handlePaste);}
};
</script>

1. HTML部分：使用 el-upload 組件創(chuàng)建一個拖拽上傳區(qū)域。
2. JavaScript部分：
   • handlePaste 方法：捕獲粘貼事件，檢查粘貼板中的數(shù)據(jù)是否為圖片文件，如果是，則調(diào)用 handleFile 方法。
   • handleFile 方法：將圖片文件添加到上傳隊列，并提交上傳。
   • mounted 生命周期鉤子：添加粘貼事件監(jiān)聽器。
   • beforeDestroy 生命周期鉤子：移除粘貼事件監(jiān)聽器，防止內(nèi)存泄漏。

隨便截圖一張，我們這個時候ctrl + v 就可以發(fā)現(xiàn)他可以獲取我們粘貼板中的文件。

我們到這一步發(fā)現(xiàn)，圖片網(wǎng)頁是獲取到。這個時候你在跟著你的業(yè)務(wù)，傳遞相關(guān)參數(shù)，這第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 // 假設(shè)服務(wù)器返回的響應中有 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就實現(xiàn)到了這一步。這里有問題，那就是你看一下，點擊上傳后的圖片是否會顯示出來呢？