背景：文件上传在选择文件后重新选择文件，然后取消会出现页面卡死的情况，且只在Chrome中出现，觉得应该是浏览器在某些地方处理不一样，后来排查到是input标签的问题，故记录一下。
一、差异介绍
Input标签type为file时，点击会弹出一个文件选择框，若选中文件后再次点击选择，然后点击取消，在Firefox浏览器中，files数组不会改变，但是在Chrome中，files数组会清空。
若想检验可以监听change事件，然后打印files数组
二、错误产生
问题出现在项目封装的一个上传组件，其部分代码如下：
<input type="file" v-on:change="upload($event)"/>
upload(e) {
this.name = e.target.files[0].name;
this.resultUrl = e.target.files[0];
}
其问题就在于直接在files[0]上获取它的name属性，在Firefox中不会出现问题，因为files数组并未改变，但在Chrome中files数组在取消之后被清空了，同时因为是在组件中引起的error，并未对error进行处理，导致页面卡死并且控制台没有任何打印，(没有打印的原因是在生产环境下禁用了错误打印，组件内部出错还是会打印的)所以最简单的做法就是加上一个判断，如下：
<input type="file" v-on:change="upload($event)"/>
upload(e) {
if(e.target.files.length > 0) {
this.name = e.target.files[0].name;
this.resultUrl = e.target.files[0];
}
}