Vue中修改input[ type="file"]的值

原创 15210847976 随笔 Vue学习笔记 185阅读 2017-11-28 16:48:19 举报

在上传文件时经常会遇到一个坑,当 type="file"上传文件后,因为监听事件是change,因为不能再重复上传,或是删除文件后也不能重新选择上传,
解决的办法就是讲文件的value重置,
在chrome中直接将value=‘’即可,但是在IE中因为涉及到安全问题,不能给value直接赋值,在其他框架上有直接修改outerHtml的办法,但是在vue框架中这个办法行不通。
可采用下面办法
页面中代码:
<form id="FileForm" ref="fileForm">
<input @click="resetFile" id="uploadBtn" type="file" value="" accept=".doc,.docx,.wps,.xls,.xlsx,.txt,.ppt,.pptx,.pdf,.dwg,.dxf,.jpg,.bmp,.png,.mp4" multiple="multiple" style="opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;width:100%;height:100%;"
@change='onUpload'>
</form>
js中:
resetFile() {
var file = this.$refs.fileForm;
file.reset();
},

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复