Vue组合API中的打开文件对话框答案

【问题标题】：Open file dialogbox in vue composition APIVue组合API中的打开文件对话框
【发布时间】：2020-04-13 07:04:07
【问题描述】：

我试图在单击按钮时打开“选择文件”对话框，可以在 VUE 中使用 this.$refs.fileInput.click()，但这在组合 API 中不起作用。

这里是代码供参考：https://codepen.io/imjatin/pen/zYvGpBq

脚本

    const { ref, computed, watch, onMounted, context } = vueCompositionApi;

    Vue.config.productionTip = false;
    Vue.use(vueCompositionApi.default);

    new Vue({
      setup(context) {    
        const fileInput = ref(null);
        const trigger = () => {
          fileInput.click()
        }; 

        // lifecycle
        onMounted(() => {     
        });
        // expose bindings on render context
        return {
          trigger,fileInput 
        };
      }
    }).$mount('#app');

模板

    <div id="app">
      <div>
        <div @click="trigger" class="trigger">Click me</div>
      <input type="file" ref="fileInput"/>
        </div>
    </div>

谢谢。

【问题讨论】：

标签： vue.js vuejs2 vue-composition-api

【解决方案1】：

您是否尝试使用context.refs.fileInput.click(); 访问它？

别忘了是setup(props, context) 而不是setup(context)。

在这里尝试我的编辑：https://codepen.io/ziszo/pen/oNxbvWW

祝你好运！ :)

【讨论】：

【解决方案2】：

我正在使用 Vue 3 CLI 并尝试了几种不同的建议，发现以下是最可靠的。

<template>  
    <input class="btnFileLoad" type="file" ref="oFileHandler" @change="LoadMethod($event)" />
    <button class="btn" @click="fileLoad">Load</button>
</template>

<script>
import {ref} from "vue";
export default{
    setup(){
         const hiddenFileElement = ref({})
         return {hiddenFileElement }
    }
    methods:{
        fileLoad() {
        this.hiddenFileElement = this.$refs.oFileHandler;
        this.hiddenFileElement.click();
        },
    }
}
</script>
<style>
.btn{ background-color:blue; color:white; }
.btnFileLoad{ display:none }
</style>

我还在 Chrome 中发现，如果从按钮元素到隐藏文件处理程序的调用需要很长时间，则会显示一条错误消息，内容为“文件选择器对话框只能在用户激活时显示”。显示在源视图中。通过在 setup 中定义 hiddenFileElement 问题就消失了。

【讨论】：