前言

先看前言

<el-tooltip placement="top-start" :hide-after="50000">
  <div slot="content" >
       <p v-html="tipText"></p>
   </div>  
   <div class="files-input">
       <el-input v-model="fileNames" readonly="readonly" webkitdirectory ></el-input>
   </div>
</el-tooltip>
<div class="select-files-btn">
   <el-button type="primary" @click="choiceFiles">选择文件</el-button>
   <input ref="filElem" type="file"  class="upload-file" webkitdirectory @change="getFile"/>
</div>

看这个的先明白change事件:

change 事件是只有值改变了 才会触发!

最后有源码

最近用vue3.0+element-ui 写项目需要上传文件， 便遇到了这个坑… 恭喜恭喜

自己尝试解决， 但对vue不是很熟， 结果解决的不太完美，这太难受了 。上网找找看吧…

网上找的：

就上网找了一些看起来是比较成功的 有说用v-if绑定销毁在重建的， 这个确实可以 但是有缺陷 第二次点击的时候需要点击两次才会跳去系统选择文件夹

网上的都不太完美， 自己搞吧 甲方大哥！

后来自己就想着能不能我每点击一次我就把上一次的值清空 然后再用dispatch分发点击事件 ， 然后chang事件不就监听到了嘛。 牛 还是要相信自己啊 开搞。

解决办法

》》》》 解决办法就是在点击之前把change事件值改变一下 这样就可以多次选择同一个文件或目录了

关键代码:this.$refs.filElem.value = null;

<div class="files-item">
            <span>请选择文件</span>
        </div>
        <el-tooltip placement="top-start" :hide-after="50000">
            <div slot="content" >
                <p v-html="tipText"></p>
            </div>  
            <div class="files-input">
                <el-input v-model="fileNames" readonly="readonly" webkitdirectory ></el-input>
            </div>
        </el-tooltip>
        <div class="select-files-btn">
            <el-button type="primary" @click="choiceFiles">选择文件</el-button>
            <input ref="filElem" type="file"  class="upload-file" webkitdirectory @change="getFile"/>
        </div>
<script>
methods: {
        choiceFiles() {
        	// 在激活change之前先清空， 这样change事件就被触发了
            this.$refs.filElem.value = null;
            this.fileNames = '';
            this.tipText = '';
            this.$refs.filElem.click();
        },

        getFile() {
            let that = this;
            // 提示信息
            const h = this.$createElement;
            const files = this.$refs.filElem.files;
         }
  }
</script>