问题：
用户选择文件，点击上传按钮手动上传，上传失败并提示异常信息；返回之前选中文件尝试修改，修改保存后，返回页面（此时页面上之前选中的文件还在），再次点击上传按钮手动上传，页面没有提示，Network显示net::ERR_UPLOAD_FILE_CHANGED。
场景：
React，AntD，Upload组件上传文件，手动上传模式（自动上传模式不存在此问题）。
原因：
用户已将文件更改为另一个文件，那么在没有明确的用户操作的情况下不能（不应）访问该文件，否则将是安全问题。
解决方案：
在文件上传前，尝试读取文件，若读取成功则继续上传，若读取失败，则提示异常。
const reader = new FileReader();
// 尝试读取file，此处目的不是读取，只是判断是否可成功读取，所以slice(0, 1)
reader.readAsText(file.slice(0, 1), "UTF-8");
// 可正常读取
reader.onload = (event) => {
// 读取结果，如：P
console.log(event.target.result);
}
// 读取异常
reader.onerror = (err) => {
// read error caught here
console.log(err);
// DOMException: The requested file could not be read, typically due to permission problems that have occurred after a reference to a file was acquired.
// 根据此异常信息可较精确的定位到原因是权限问题
console.log(err.target.error);
}
- 起初尝试在网络请求的catch中捕获异常进行处理，毕竟异常是Network出现的，但是请求catch到的异常信息如下：
Error
Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:69)
无法精确定位到问题，目测不可行。
- 还有一个尝试比较两个文件lastModified的方案，在项目里输出lastModified是一样的，所以作罢。
参考资料：
stackoverflow.com/questions/6…
