更改后用AJAX重新上传文件会在Chrome中导致net :: ERR_UPLOAD_FILE_CHANGED [英] Re-uploading a file with AJAX after it was changed causes net::ERR_UPLOAD_FILE_CHANGED in Chrome
问题描述
我有一个简单的HTML表单，该表单通过AJAX将选定的文件发送到API端点.
I have a simple HTML form that sends an selected file via AJAX to an API endpoint.
如果我执行以下步骤:
- 按下上传"按钮并发出POST请求以上传文件
- 更改文件系统上的所选文件(在文本编辑器中)，而无需在文件选择器中再次选择它.
- 再次按上传"按钮，并作为第二个POST请求
Chrome将使第二个请求失败，并显示错误:net::ERR_UPLOAD_FILE_CHANGED.请注意，如果您在首次上传之前更改文件，则文件上传将没有问题.在首次成功上传后更改文件时，该错误仅在第二次上传时发生.我正在使用CSV文件进行测试，然后在文本编辑器中对其进行更改.
Chrome will fail the second request with an error: net::ERR_UPLOAD_FILE_CHANGED. Note that if you change the file before the initial upload, the file will be uploaded without a problem. The error happens only on the second upload, when you change the file after an initial successful upload. I am testing this with CSV files, and changing them in a text editor.
似乎没有办法隔离该错误.
There does not seem to be a way to isolate that error.
有什么办法解决吗?
如果没有，是否有可能捕获到此特定错误，并向用户显示有意义的消息. Fetch在承诺中返回的错误没有关于此的特定信息.我唯一看到ERR_UPLOAD_FILE_CHANGED的地方是浏览器开发者控制台.
If not, is it possible to catch this specific error, and display a meaningful message to the user. The error that Fetch returns in the promise has no specific info about this. The only place where I see the ERR_UPLOAD_FILE_CHANGED is in the browser dev console.
我非常确定大约一年前(2019年初)没有任何问题，因为重新上传已更改文件的可能性很好地在我们的UI流程中发挥了作用.现在，我们需要强制用户再次选择文件.因此，我以为这是在最近的chrome更新中引入的.
I am pretty sure that there was not any problem with this about a year ago (early 2019), as the possibility to re-upload a changed file, played in nicely in our UI flow. Now we need to force the user to pick the file again. So my assumption that this was introduced with a recent chrome update.
这是代码的简化片段:
<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>
推荐答案
一种快速的解决方法是在AJAX调用中包含一个complete参数(或始终被调用的finally调用的任何等效内容)并添加代码重置表格.我注意到再次附加文件可以解决该问题.尽管我知道这不是解决问题的真正方法，但它确实可以处理或避免该错误.
A quick workaround would be to include a complete parameter to AJAX call (or any equivalent of a finally call that always gets invoked) and add code that resets the form. I've noticed that attaching the file again solves it. While I appreciate it's not a real solution to the problem, it does provide handling or rather avoidance of that error.
这样，如果用户出于任何原因需要重新上传文件，则必须再次选择文件.
This way, if the user for any reason needs to re-upload the file, they'll have to choose the file again.
以下示例:
$.ajax({
url: this.action,
type: this.method,
data: this.data,
success: function (response) {
// success scenario
},
error: function (result) {
// error scenario
},
complete: function (data) {
$('#uploadForm')[0].reset(); // this will reset the form fields
}
});
这篇关于更改后用AJAX重新上传文件会在Chrome中导致net :: ERR_UPLOAD_FILE_CHANGED的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
