在iOS Safari上打开文件/图像选择器时，现有异步请求出现网络错误失败

Question

我有一个项目，需要异步上传多个图像。它在任何地方都工作得很好(Chrome、火狐、MacOS Safari、Android、iOS Safari在运行11.4的iOS模拟器上)。但是，在我的iPhone上使用iOS Safari (以及其他一些iPhones，我尝试了所有运行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>

这是main.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”按钮，然后在上传时单击一个文件输入(与其他所有内容完全无关)，选择一个菜单选项(如照片或视频、照片库或浏览)，然后选择某个选项，或拍照，甚至单击cancel返回，上传blob将失败约1/3的时间‘加载资源失败:网络连接丢失。’错误。不管上传的是什么，(图片或blob什么的)。

这是一段视频，展示了发生了什么。

经过两天的调试，我在我的研究中没有发现任何有兴趣的地方，相信我已经尝试过了。任何帮助都将不胜感激。开始相信这可能只是Safari的一个bug。

Answer 1

当照片选择器出现时，这似乎是Safari进入后台的一个问题，而作为后台应用程序，现有的网络请求通常不会完成。这可不是件容易的事。我一直在测试iOS 13，据我所知，这是固定的。有兴趣看看是否还有其他有这个问题的人也能验证，但是我一直在iOS 12和iOS 13上运行测试，而且它一直在失败，12失败，13成功。

Answer 2

当您启动文件选择器等并使其失败时，您是否在表单中获得了一个空文件字段？

Safari中有一个已知臭虫，如果表单中有一个空文件字段，它将导致XMLHttpRequest上传失败。

Answer 3

这里的答案可能在于不修复错误，而是使用更好的UI/UX。

当文件上传时，您可以禁用文件选择器按钮。您还可以在(禁用的)文件选择器按钮旁边有一个cancel按钮，该按钮在上传时显示，以防用户决定取消上传。

如果你需要上传多个文件，让它全部堆叠起来，你可以运行一个上传，顺序上传所有的文件。