Vue 监听输入框(input、textarea ...)粘贴事件获取图片、视频、文件、文件夹

简介: Vue 监听输入框(input、textarea ...)粘贴事件获取图片、视频、文件、文件夹

Vue 通过 贴贴事件监听,拿到 图片、视频、文件、文件夹,可以上传之后使用,也可以先展示后上传。

<template>
  <div>
    <input @paste="pasting">
    <img :src="url">
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 贴贴图片地址
      url: undefined
    }
  },
  methods: {
    // 贴贴事件
    pasting (e) {
      // 获取剪切板图片、视频、文件、文件夹
      const file = e.clipboardData.files[0]
      // 拿到文件对象后,先上传或先展示都行,这里以图片进行举例
      // 如果是直接上传服务器,那可以拿到图片地址直接使用
      // 如果不进行上传,先展示,等点击确定在上传,那就自己创建一个链接进行使用
      const windowURL = window.URL || window.webkitURL
      this.url = windowURL.createObjectURL(file)
    }
  }
}
</script>

相关文章
|
4月前
|
存储 JavaScript 前端开发
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中,实现文件批量下载是常见需求。例如文档管理系统或图片库应用中,用户可能需要一次性下载多个文件。本文介绍了三种技术方案:1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载;2) 借助后端接口完成文件压缩与传输;3) 使用`StreamSaver`解决大文件下载问题。同时,通过在线教育平台的实例详细说明了前后端的具体实现步骤,帮助开发者根据项目需求选择合适方案。
311 0
|
12月前
|
缓存 JavaScript
|
12月前
|
JavaScript
vue3,使用watch监听props中的数据
【10月更文挑战第3天】
3605 2
|
12月前
|
存储 JavaScript 前端开发
vue尚品汇商城项目-day05【30.登录与注册静态组件(处理公共图片资源问题)+31.注册的业务+登录业务】
vue尚品汇商城项目-day05【30.登录与注册静态组件(处理公共图片资源问题)+31.注册的业务+登录业务】
94 1
|
12月前
|
JSON 缓存 JavaScript
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
98 0
|
12月前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-48.(了解)图片懒加载插件】
vue尚品汇商城项目-day07【vue插件-48.(了解)图片懒加载插件】
78 0
|
开发框架 JavaScript 前端开发
手把手教你剖析vue响应式原理,监听数据不再迷茫
该文章深入剖析了Vue.js的响应式原理,特别是如何利用`Object.defineProperty()`来实现数据变化的监听,并探讨了其在异步接口数据处理中的应用。
|
12天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
116 2
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
554 0