极客观点
项目管理
HarmonyOS
我有一个简单的 HTML 表单，它通过 AJAX 将选定的文件发送到 API 端点。
如果我执行以下步骤：
- 按上传按钮并发出 POST 请求以上传文件
- 更改文件系统上的选定文件（在文本编辑器中），而无需在文件选择器中再次选择它。
- 再次按下上传按钮，并发出第二个 POST 请求
Chrome 将导致第二个请求失败并出现错误： net::ERR_UPLOAD_FILE_CHANGED 。请注意，如果您在初始上传之前更改了文件，则文件将不会出现问题。该错误仅在第二次上传时发生，即您在初次成功上传后更改文件。我正在用 CSV 文件对此进行测试，并在文本编辑器中进行更改。
似乎没有办法隔离该错误。
有没有办法解决？
如果不是，是否有可能捕获此特定错误，并向用户显示有意义的消息。 Fetch 在承诺中返回的错误没有关于此的具体信息。我看到 ERR_UPLOAD_FILE_CHANGED 的唯一地方是在浏览器开发控制台中。
我很确定大约一年前（2019 年初）这没有任何问题，因为重新上传更改后的文件的可能性在我们的 UI 流程中发挥得很好。现在我们需要强制用户再次选择文件。所以我假设这是在最近的 chrome 更新中引入的。
这是代码的简化片段：
<html>
<head>
<script type='text/javascript'>
document.addEventListener("DOMContentLoaded", function(){
const button = document.querySelector('#btnSubmit');
button.addEventListener('click', () => {
const form = new FormData(document.querySelector('#theForm'));
const url = '/my-api'
const request = new Request(url, {
method: 'POST',
body: form
});
fetch(request).then(function() {
console.log("ok");
}).catch(function(err) {
console.log(err);
});
});
});
</script>
</head>
<body>
<form enctype="multipart/form-data" action="" method="post" id='theForm'>
<input type="file" name="csvfile" id="csvfile" value="" /></td>
<input type="button" name="uploadCSV" value="Upload" id='btnSubmit'/>
</form>
</body>
</html>
编辑：该错误在 bugs.chromium.org 上标记为 WontFix： https ://bugs.chromium.org/p/chromium/issues/detail?id=1086707#c7
原文由 Martin Taleski 发布，翻译遵循 CC BY-SA 4.0 许可协议
一个快速的解决方法是将
complete参数包含到 AJAX 调用（或任何等效的finally调用总是被调用）并添加重置表单的代码。我注意到再次附加文件可以解决问题。虽然我明白这不是问题的真正解决方案，但它确实提供了处理或避免该错误的方法。这样，如果用户出于任何原因需要重新上传文件，他们将不得不重新选择文件。
示例如下：