手机无法上传图片到服务器

Question

我正在寻找任何指示我在这里做错了什么？

情况：

我在website 上创建了一个简单的表单，要求用户输入一些文本数据和图像。然后将这些信息分别存储在服务器上——图片，以及json文件中的文本数据。

我已经在我的桌面上使用多种图像格式对其进行了测试（我只允许最常见的类型，例如jpg、png 或bmp）。一切似乎都很好。但是，它在移动设备（iOS）上并不是那么流畅。当我尝试上传屏幕截图（显示为png 格式）或我刚刚拍摄的照片（jpg）时，返回的响应为Missing picture，这意味着服务器上没有收到任何数据。问题是情况并非总是如此，有些屏幕截图可以通过，有些则没有。

我在客户端将图片编码为 base64 字符串。我尝试记录它以确保它通过，它似乎很好。但是，当我在服务器上记录接收到的参数时，在这些失败的情况下，图片字符串确实是空的！我所做的只是读取$_REQUEST 或$_POST 参数（在PHP 中）。

到目前为止，此错误仅在移动设备上出现。在前面，我想这是最相关的一段代码，但如果您需要更多，请告诉我！您也可以检查我包含的那个网站，但由于它被缩小了，所以会稍微困难一些。

function init_form_submit () {
  var button = document.getElementById('form-submit-btn'),
    image_upload_button = document.getElementById('picture');

  if (!button || !image_upload_button) return;

  image_upload_button.addEventListener('change', function (event) {
    preview_image(this);
  });

  button.addEventListener('click', function (event) {
    // Hijack the form submit.
    event.preventDefault();
    show_form_loader();

    var form_validator = FormValidator(GLOB.form_node);

    if (!form_validator.valid) {
      form_submitted_callback();
    }
    else {
      var http = new XMLHttpRequest();

      var formData = new FormData();
      formData.append("about", form_validator.fd.about);
      formData.append("email", form_validator.fd.email || '');
      formData.append("handle", form_validator.fd.handle);
      formData.append("name", form_validator.fd.name);
      formData.append("picture", GLOB.picture);

      http.open('POST', 'https://lmen.us/royalkitten/api/apply-royal-kitten/index.php', true);
      http.setRequestHeader('Content-type', 'multipart/form-data');
      http.onreadystatechange = function () {
        var response;
        if (http.readyState !== 4 || http.status !== 200) return;
        try {
          response = JSON.parse(http.responseText);
        }
        catch (error) {
          response = http.responseText;
          console.log(response);
        }
        form_submitted_callback(response);
      }
      http.send(formData);
    }
  });
}

这是我将图像数据存储在GLOB.picture 变量中的方式。这个函数只被调用了两次——一次是在用户选择图像时在上面的代码中，一次是在成功提交后的回调中，作为将表单重置为原始状态的一种方式。

function preview_image (input) {
  var preview_label = document.getElementById('picture-label'),
    preview_element = document.getElementById('picture-preview');

  if (!input.files.length) {
    if (preview_label) {
      preview_label.innerHTML = 'Select a file';
    }

    if (preview_element) {
      preview_element.src = './images/image-placeholder-600x600.jpg';
    }

    GLOB.picture = null;
    return;
  }

  var reader = new FileReader(),
    file = input.files[0];

  if (!file) return;

  reader.onload = function (event) {
    var image_data = event.target.result;

    if (preview_label) {
      preview_label.innerHTML = file.name;
    }

    if (preview_element) {
      preview_element.src = image_data;
    }

    GLOB.picture = image_data;
  }

  reader.readAsDataURL(file);
}

Answer 1

我想，问题是您的图像可能大于 PHP POST 请求允许的最大大小。您应该将表单发送为multipart/form-data，并将您的图像作为文件发送。在服务器端，您应该通过$_FILE 而不是$_POST 获取它...

要将图像作为文件发送，有多种解决方案。首先，您可以发送一个 base-64 编码的Blob，但它会比原始文件大 30%（因为 base-64 编码）。

我建议您以原始二进制格式发送文件，这样更易​​于实施且上传速度更快。

为此，您只需按原样发送input.files[0] 的内容。假设您在 preview_image() 函数中设置了 GLOB.pictureFile=input.files[0]。然后你只需以这样的形式发送它：

formData.append("picture", GLOB.pictureFile);