Vue3&el-upload 实现图片粘贴上传，截图粘贴上传

亲爱的非洲野猪

已于 2024-05-24 12:38:24 修改

阅读量1.5k

点赞数 10

文章标签： vue.js 前端 javascript

于 2023-12-14 09:46:21 首次发布

本文链接：https://blog.csdn.net/weixin_43680337/article/details/134986931

版权

本文介绍了如何在网页应用中实现在输入框中使用Ctrl+V快捷键粘贴图片，并通过el-upload组件自动上传，上传后进行图片识别、表格预览和Excel文件生成。作者提供了Vue.js代码示例供读者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做图片的上传的时候有一个需求，要求使用电脑默认的粘贴板粘贴就能实现图片的上传，比如微信截图后在系统页面粘贴一下也要保证图片能展示上传到系统，走后面的业务逻辑。

话不多说，直接看效果：

用户点击左侧最上边的输入框，在按住control+V，就能把粘贴板复制的图片传输到el-upload组件中，并自动进行上传（上传后就是业务逻辑部分，识别图片中的文字或者表格，并在前端页面就能预览表格，还能下载机器生成的Excel文件，后续再写一篇文章介绍怎么实现页面上的表格一件复制，然后在本地的Excel或者WPS，Numbers等软件带格式的粘贴）。

代码实现，直接拷贝就能用

先定义一个input框

<el-input style="width: 146px;margin-bottom: 6px;"
     type="text"
     placeholder="点击 粘贴图片"
     @paste="handlePaste"
/>



<!-- upload 组件-->
<el-upload 
 :before-upload="beforeFileUpload"
 ...
>
...

</el-upload>

读取粘贴板内容并传给el-upload

<script lang="ts" setup>

   ...

   const uploadRef = ref<InstanceType<typeof ElUpload>>()

   const handlePaste=(event)=>{
        const files = event.clipboardData.files[0];
        if (!files) {
            console.info("请复制图片再粘贴！");
            return;
        }
        uploadRef?.value.handleStart(files); // 将粘贴过来的图片加入预上传队列
        uploadRef?.value.submit(); // 提交图片上传队列
    }

   ...

</script>

这个功能已经上线了，如果大家想看一下效果，可以点击这里体验一下。