通过 AJAX POST 发送 URI 数据答案

【问题标题】：Sending URI data via AJAX POST通过 AJAX POST 发送 URI 数据
【发布时间】：2018-03-08 22:53:05
【问题描述】：

我在通过 html 表单发送长文本字符串时遇到了一些麻烦。

我想将图像数据 uri 发送到一个 php 页面，在那里可以处理数据并将其保存在 MySQL 中。

图像数据示例：

data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfO..

数据来自我在页面上的剪贴板粘贴功能。

我在php页面保存数据没有问题，但是把数据拿到页面就麻烦了。

下面的脚本是我尝试从客户端页面发送数据的脚本：

formData = new FormData();
formData.append('imagedata','data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfO..');
$.ajax({
    url: "test.php?reportid=1", 
    type: "POST", 
    cache: false,
    contentType: false,
    processData: false,
    data: formData
}).done(function(e){
    alert(e);
});

如果图像尺寸很小，它可以正常工作，但如果我得到一个超过 250KB 的图像，它会在发布过程中丢失数据。

也许有人有更好的方法将数据发布到服务器？

【问题讨论】：

在 php.ini 中，upload_max_filesize & post_max_size 是什么？
两者都设置为256M
代替data: formData 试试data: "imagedata=" + encodeURIComponent('data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfO..')。除此之外，您是随机丢失数据还是限制在某个字节限制？
是的，我丢失了数据，而且它会有所不同，如果我使用data: "imagedata=" + encodeURIComponent('data:image....，那么我应该如何在 PHP 页面上接收它？ $_POST?

标签： javascript php jquery ajax post

【解决方案1】：

我找到了传输数据的替代方法。

使用： https://stackoverflow.com/a/5100158/3176569 用于将 base64 代码转换为 blob

function dataURItoBlob(dataURI) {
  // convert base64/URLEncoded data component to raw binary data held in a string
  var byteString;

  if (dataURI.split(',')[0].indexOf('base64') >= 0)
    byteString = atob(dataURI.split(',')[1]);
  else
    byteString = unescape(dataURI.split(',')[1]);

  // separate out the mime component
  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

  // write the bytes of the string to a typed array
  var ia = new Uint8Array(byteString.length);

  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }

  return new Blob([ia], {
    type: mimeString
  });
}

我把代码改成这样：

formData = new FormData();
var blob = dataURItoBlob('data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfO..');

formData.append('imagedata', blob, 'temp.png');

var request = new XMLHttpRequest();
request.open("POST", "test.php?reportid=1");
request.send(formData);

然后在 PHP 页面上，我通过 $_FILES[]; 接收数据；

$file = $_FILES['imagedata'];
$filetype = $file['type'];
$blob = file_get_contents($file['tmp_name']);

之后，我可以将它插入到 MySQL 数据库中吗？

好吧，无论如何感谢您的回复和建议:)

【讨论】：

太棒了。我遇到了无法在主机上解决的跨源问题，转移到 blob，然后回到服务器上进行存储工作 :) :)

【解决方案2】：

尝试 JSON.parse('data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfO..');

【讨论】：