当 file/image 选择器在 iOS Safari 上打开时，现有异步请求因网络错误而失败

Question

我有一个项目需要异步上传多张图片。它在任何地方都运行良好（Chrome、Firefox、MacOS Safari、Android Chrome、iOS Safari 在 iOS 模拟器运行 11.4 上）。但是，在我使用 iOS Safari 的 iPhone 上（以及我尝试了所有 iPhone 11.4 的其他一些 iPhone），当我打开 image/file 选择器。

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

<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);
  });
});

如果我单击 'Upload Blob' 按钮然后不执行任何其他操作，它会 100% 有效，永远不会失败。但是，如果我单击上传 blob 按钮，然后在上传时我单击一个文件输入（这与其他所有内容完全无关），选择菜单选项之一（拍摄照片或视频、照片库或浏览），然后选择一些东西，或拍照，甚至只是点击取消返回，上传 blob 将有大约 1/3 的时间失败并出现 'Failed to load resource: The network connection was lost.' 错误。上传的内容（图像或 blob 或其他）并不重要。

Here is a video showing what happens.

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

Answer 1

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

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

如果您需要上传多个文件，将它们全部堆叠起来，您可以运行一次上传，依次上传所有文件。

Answer 2

当您启动文件选择器等并使其失败时，您的表单中是否出现空文件字段？

Safari 中有一个 known bug 如果表单的文件字段为空，它会导致 XMLHttpRequest 上传失败。

Answer 3

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

当 file/image 选择器在 iOS Safari 上打开时，现有异步请求因网络错误而失败

Existing async requests failing with network error when file/image picker opened on iOS Safari

javascript

safari

xmlhttprequest

mobile-safari

ios