vue选择本地文件或者Ctrl+v粘贴截图上传

前端陈伟霆

于 2021-03-26 16:19:31 发布

阅读量1.3k

点赞数 2

文章标签： vue js html css

本文链接：https://blog.youkuaiyun.com/weixin_43927397/article/details/115248411

版权

本文介绍了如何在Vue项目中实现用户既能从本地选择文件，也能通过Ctrl+v粘贴截图进行上传的功能。详细讲解了HTML、JavaScript和CSS的相关实现步骤，并提供了最终的效果图展示。

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

vue选择本地文件或者Ctrl+v粘贴截图上传

场景：因为最近项目里要求用户上传本地图片，并且既可以从本地选取，也可以直接粘贴截图，所以就研究了一下，顺便分享给大家。

html部分

<div style="margin: 15px 0px 15px;">
              <div>
                <div class="choose-localImg">
                  选择凭证
                  <input ref="InputFile" class="file-ipt" type="file" name="files" accept="image/*" @change="chooseRecoverLocal($event)">
                </div>
                <div class="img-paste" @paste="handlePaste">
                  将图片按Ctrl+V 粘贴至此处
                </div>
                <div v-for="(item,index) in payImageList" :key="index" style="margin-top: 10px;">
                  <div style="position: relative;width: 60%;margin: auto;">
                    <div class="remove-img" @click="removePayImage(index)">X</div>
                    <img style="width:100%" :src="baseUrl + item">
                  </div>

                </div>
                <!--<img v-if