Php Can'；t将图像上传到手机上的服务器

我在寻找任何指针我做错了什么

情况： 我在上创建了一个简单的表单，要求用户输入一些文本数据和图像。然后，这些信息分别存储在服务器图片上，文本数据存储在

json

文件中

我在桌面上用多种图像格式对它进行了测试（我只允许最常见的类型，如

jpg

、

png

、或

bmp

）。一切似乎都很好。然而，在移动设备（iOS）上，这并不是那么顺利。当我尝试上传屏幕截图（显示为

png

格式）或刚拍摄的图片（

jpg

）时，返回的响应为

缺少图片

，这意味着服务器上没有收到任何数据。问题是，情况并非总是如此，有些截图可以通过，有些则不行

我在客户端将图片编码为base64字符串。我试着把它记录下来，以确保它能通过，而且看起来很好。但是，当我在服务器上记录收到的参数时，在这些失败的情况下，图片字符串实际上是空的！我所做的就是读取

$\u请求

或

$\u 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);
}

---

我想，问题是您的图像可能大于POST请求允许的PHP最大大小。您应该以

多部分/表单数据的形式发送表单，并以文件的形式发送图像。在服务器端，您应该通过
$\u文件
而不是
$\u POST

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

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

为此，您只需按原样发送
input.files[0]
的内容即可。假设您在
preview\u image（）
函数中设置了
GLOB.pictureFile=input.files[0]
。然后，您只需以如下形式发送：

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

嗯，我现在好像被困在别的地方了。我稍微修改了代码以使用
多部分/表单数据
，但是现在
$\u文件
数组在PHP代码中是空的？我检查了phpinfo的最大允许文件大小，它比图像大小大得多。是否以您的表单发送文件？（不是base64字符串）更新了我的朋友！我发送的图片编码如您所见，当我检查发送请求的标题时，它位于正确的变量下。对不起，您更新了什么？我看不到任何变化！我的回答。。。我更新并解释了如何作为文件发送。