问题描述

• 在使用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
    }
}

后续

• 问题解决