Chrome和Firefox的<input type=“file”/>的差异

Yukino 514 2021-12-29

背景:文件上传在选择文件后重新选择文件,然后取消会出现页面卡死的情况,且只在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];
    }
}

# 前端 # 浏览器 # JS