VUE项目中无法触发隐藏input[type=file]的事件

Question

VUE的一个页面组件在activeted的时候调用一个函数，创建一个input[type=file]标签，然后点击。

函数代码如下：

quickPhoto() {

        // 创建input

      let file = document.createElement('input')

      file.setAttribute('type', 'file')

      file.setAttribute('capture', 'camera')

      file.setAttribute('accept', 'image/*')

      file.style.display = 'none'

      document.querySelector('body').appendChild(file)

      file.addEventListener('change', ()=>{

        this.$vux.loading.show()

        //压缩图片

        this.$utils.$imgCompress(file.files[0]).then(img=>{

          this.$vux.loading.hide()

          this.params.problemImgs.push(img)

          file.value=""

          delete file.parentNode.removeChild(file)

        }).catch(e=>{

          this.$vux.loading.hide()

          alert(e)

        })

      })

      file.addEventListener('click', ()=>{

        console.log('click')

      })

      file.click()

      window.quickPhoto = window.quickPhoto || this.quickPhoto

    }

页面打开后可以在console看到click，但是没有弹出选择图片的窗口。

但是在控制台手动调用quickPhoto()就可以弹出窗口选择图片，

求解。

Answer 1

浏览器不允许js脚本自动打开文件选择, 必须是用户操作才可以