vue elementui el-upload组件 input type=file坑重新选择同一文件时不再显示

问题描述

在使用vue2.0+elementui的upload组件时，遇到一个问题，当你首次选择文件的时候没问题，当你删除已经选择好的某个文件后，再次选择这个文件的时候，就无法显示了

问题分析

在移除的事件中写清除当前文件的方法

但是在处理过程中，将file对象置空无效

最后发现是html的input type=file标签的问题

在 HTML 文档中 ，

<input type="file">

标签是浏览器向服务器发送选中文件的。该元素有一个 value 属性，保存了用户指定的文件的名称，为安全起见，file-upload 元素的value 属性是只读的，不允许程序员修改它的值，并且HTML value 属性也会被忽略。但我们确实需要将value值置空。

问题解决

不要采用删除当前input[type=file]这个节点，然后再重新创建dom这种方案，这样是不合理的。

input[type=file]使用的是onchange去做，onchange监听的为input的value值，只有再内容发生改变的时候去触发，而value在上传文件的时候保存的是文件的内容，你只需要在上传成功的回调里面，将当前input的value值置空即可。

handlerRemove(file,fileList) {
/*获取input type=file元素*/
/*注意：此时因为elementui中upload组件中默认的name属性值是file，可修改*/
let fs = document.getElementsByName('file');
if(fs.length > 0) {
fs.value=null
}
}

后续

问题解决