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

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

来获取它

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

我建议您使用原始二进制格式发送文件，这种格式更容易实现，上传速度更快。

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

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

无法在移动设备上将图片上传到服务器

场合：

1 个答案: