最近用户反馈一个上传文件错误,提示信息为 net::ERR_UPLOAD_FILE_CHANGED
,由于是第一次遇到这个错误,很是好奇。
不过,用户说不清其操作步骤,只能根据错误信息进行推断,得出操作步骤如下:
- 点击
<input type="file">
控件,选择想要上传的文件 - 点击上传按钮,开启上传
- 修改文件内容
- 再次点击上传按钮,开启上传
在两次上传中,第一次上传正常,第二次上传会报上述错误。
原因分析
这个错误源于浏览器读取文件的时机,当用户选择了文件后,浏览器会记录文件所在位置,并读取文件的元数据,但不会立刻读取文件内容,而是在真正需要的时候(即上传时)再去读取。
当用户修改文件内容后,再次点击上传时,浏览器开始读取文件内容,如果发现与添加文件时获取到的元数据信息(文件体积)不完全一致,就会报出上述错误。
解决方法
这是浏览器的行为,无法通过 JavaScript
等技术手段去规避,因此并没有解决方法,只能告诉用户不要这样操作,如果修改了文件内容,需要重新添加文件,然后点击上传。