我有一个项目，我需要异步上传多张图片。它在任何地方都运行良好(Chrome，Firefox，MacOS Safari，Android Chrome，运行11.4的iOS模拟器上的iOS Safari(。但是，在使用iOS Safari的iPhone上(以及我尝试过的其他一些iPhone都运行11.4(，当我打开图像/文件选择器时，现有请求失败。
从那以后，我将问题提炼为一些更简单的代码：
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="/javascripts/main.js"></script>
</head>
<body>
<p>Upload Progress: <span id="status">Not Started</span></p>
<p>Blob Upload: <button id="blobUpload">Upload Blob</button></p>
<p>File Input: <input type="file" /></p>
</body>
</html>
这是主要的.js：
$(document).ready(() => {
$("#blobUpload").click(() => {
const status = document.getElementById("status");
status.innerHTML = "Started";
// Create an array about 2mb in size (similar to an image);
// and append it to a form data object
const intArray = new Uint8Array(2000000);
const blob = new Blob([intArray]);
const formData = new FormData();
formData.append('file', blob);
const request = new XMLHttpRequest();
request.upload.addEventListener('progress', (ev) => {
const percent = Math.round(ev.loaded / ev.total * 100);
status.innerHTML = percent + '%';
}, false);
request.upload.addEventListener('error', (ev) => {
status.innerHTML = '<span style="color: red">Network Error</span>';
});
request.open('POST', '/upload', true);
request.send(formData);
});
});
如果我单击"上传 Blob"按钮，然后不执行任何其他操作，它 100% 有效，永远不会失败。但是，如果我单击上传 blob 按钮，然后在上传时单击文件输入(与其他所有内容完全无关(，选择菜单选项之一(拍摄照片或视频、照片库或浏览(，然后选择某些内容，或拍照，甚至只是点击取消返回，上传 blob 将在大约 1/3 的时间内失败，并显示"无法加载资源： 网络连接丢失了。"错误。上传的内容(图像或斑点或其他内容(无关紧要。
这是一个视频，展示了发生的事情。
调试已经 2 天了，我对我的研究没有任何兴趣，相信我，我已经尝试过了。任何帮助将不胜感激。开始相信这可能只是Safari的一个错误。
当照片选择器出现时，这似乎是Safari进入后台的问题，并且作为后台应用程序，现有的网络请求通常无法完成。这并不容易解决。我一直在测试iOS 13，据我所知，这是固定的。有兴趣看看是否有其他有此问题的人也可以验证，但我一直在 iOS 12 与 iOS 13 上运行测试，它始终以 12 失败，以 13 成功。
当您启动文件选择器等并使其失败时，您是否在表单中获得空文件字段？
Safari 中有一个已知的错误，如果表单具有空文件字段，则会导致 XMLHttpRequest 上传失败。
这里的答案可能在于不修复错误，而是更好的UI/UX。
上传文件时，您可以禁用文件选取器按钮。 您还可以在上传某些内容时显示的(禁用的(文件选取器按钮旁边有一个取消按钮，以防用户决定取消上传。
如果您需要上传多个文件，请将它们全部堆叠起来，您可以运行按顺序上传所有文件的单个上传。