Question

我有一个项目，我需要异步上传多个图像。它在任何地方都可以正常运行（运行11.4的iOS模拟器上的Chrome，Firefox，MacOS Safari，Android Chrome，iOS Safari）。但是，在使用iOS Safari的iPhone（以及其他尝试运行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或其他内容）都没有关系。

Here is a video showing what happens.

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

Answer 1

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

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

Answer 2

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

Answer 3

答案可能不在于解决错误，而在于具有更好的UI / UX。

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

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

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

3 个答案: