html,vue触发文件上传的区别

1,819 阅读1分钟

1.触发input事件不同

html写法

<input id="file" type="file" accept=".map" onchange="upload()" />

vue写法

<input ref="referenceUpload" @change="referenceUpload" type="file" accept=".map"  multiple/>

2.解决input[type='file'] change事件无法上传相同文件的问题

html写法

document.getElementById('file').value = null;

vue写法

referenceUpload(e) {
   this.$refs.referenceUpload.value = null;
}

3.vue获取input对应的dom结构以及获取input实例

dom结构

console.log(document.querySelector("#imgReader")) 
//输出: <input data-v-5a90ec03="" type="file" accept="image/*" id="imgReader">

input实例

console.log(this.$refs.imgRef);

4.总结

简单的问题,然而有时候需要花费一点时间去查找,在此记录一下,请大佬绕道而行哈,毕竟非常简单的知识点, ̄□ ̄||