前言
先看前言
<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>