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

Question

我有一个项目，我需要异步上传多个图像。 它无处不在（Chrome，Firefox，MacOS Safari，Android Chrome，运行11.4的iOS模拟器上的iOS Safari）。 但是，在我的iPhone上使用iOS Safari（以及其他一些我试过全部运行11.4的iPhone），当我打开图像/文件选择器时，现有的请求失败了。

我已经将问题简化为一些更简单的代码：

<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按钮，然后在上传时我单击一个文件输入（这与其他所有内容完全无关），选择一个菜单选项（拍摄照片或视频，照片库或浏览），然后选择一些东西，或拍照，或者甚至只是点击取消返回，上传blob将失败大约1/3的时间，“加载资源失败：网络连接丢失”。 错误。 什么是上传，（图像或blob或其他）并不重要。

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

这是2天的调试，我发现我的研究没有兴趣，相信我，我已经尝试过了。 任何帮助，将不胜感激。 开始相信它可能只是Safari的一个错误。

Answer 1

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

Safari中存在一个已知错误 ，如果表单具有空文件字段，则会导致XMLHttpRequest上传失败。

Answer 2

看来，当照片选择器出现时，这是Safari进入后台的问题，而作为后台应用程序，现有的网络请求通常无法完成。 没有简单的解决方法。 我一直在测试iOS 13，据我所知，这是固定的。 有兴趣看看是否有其他人有这个问题也可以验证，但我一直在iOS 12和iOS 13上运行测试，它一直失败12和13成功。

Answer 3

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

文件上传时，您可以禁用文件选择器按钮。 您可以在（禁用的）文件选择器按钮旁边有一个取消按钮，该按钮会在上传内容时显示，以防用户决定取消上传。

如果您需要上传多个文件，请将它们全部堆叠起来，您可以运行单个上传，按顺序上传所有文件。