关于vue3 点击一个元素 触发另一个元素事件的方法 替代图片上传

438 阅读1分钟

元素A

<div @click="openFileBox"></div>

元素B 原生input元素

 <input
        ref="fileRef"
        type="file"
        hidden
        accept="image/*"
        @change="selectImg"
      >

实际的需要的结果是点击显示的div的元素 触发input的事件 则

//用钩子触发input的事件
function openFileBox () {
  setTimeout(() => {
    fileRef.value.click()
  }, 400)
}


function selectImg (event) {
  if (event.target.files.length > 0) {
    const img = event.target.files[0]
    if (img.size >= props.sizeLimit) {
      message.error('图片大小超出限制!')
    } else {
      uploading.value = true
      API.imagesUpload([ img ]).then(res => {
        if (res.code === 0) {
          imageArr.value.push(res.payload[0])
        } else {
          message.error(res.msg)
        }
        uploading.value = false
      })
    }
  }
}