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

242 阅读 0 评论 160 点赞

我是靠谱客的博主感性芹菜，这篇文章主要介绍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>