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

最新推荐文章于 2024-07-13 12:38:48 发布

weixin_34176694

最新推荐文章于 2024-07-13 12:38:48 发布

阅读量6k

点赞数

文章标签： javascript ui python ViewUI

原文链接：https://my.oschina.net/yxmBetter/blog/1543487

版权

2019独角兽企业重金招聘Python工程师标准>>>

问题描述

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