vue3点击上传

今天发现vue3没有$refs,然后我之前写点击上传都是给标签绑定ref来写的。现在给大家介绍另一种写法。使用setInterval来定时执行 因为我们如果不用setInterval 直接写的话 那么我们第一次获取到的files[0]始终是undefined，当我们的files.length长度不为0时，就是我们获取到了文件，那么我们就去除定时器 听说这个叫防抖 最后一定要清空input的value 否则下一次触发事件 你会拿到你第一次获取到的内容

const load = () => {
  const input = document.querySelector('#inp')
  input.click();
}
const file = () => {
  const timer = setInterval( () => {
    const input = document.querySelector('#inp')
    if(input.files.length > 0){
      let file =input.files[0];
      console.log(file)
      clearInterval(timer)
      input.value = ''
    }
  },)

}
<template>
    <div @click='load'>点击上传</div>
    <input id='inp' type='file' @change='file' style='display:none;' />
</template>

还有另一种写法就是给input change事件写法如下 比较简单,所以一种需求有很多写法 有简单 有复杂的 我这种也不一定是最便捷的

const load = () => {
  const input = document.querySelector('#inp')
  input.click();
}
const file = (e) => {
  const file = e.target.files[0]

}
<template>
    <div @click='load'>点击上传</div>
    <input id='inp' type='file' @chagne='file($event)' style='display:none;' />
</template>