Jquery ajax，发送非常大的数据库base64，如何优化

Question

所以，我有一个脚本用于从网络摄像头捕获视频，然后创建一个 gif：

var base64data;
          var img = document.createElement('img');
          var reader = new window.FileReader();
          reader.readAsDataURL(blob);
          reader.onloadend = function() {
            base64data = reader.result;
            img.src = base64data;
          }

因此，使用此脚本，我从网络摄像头获取 blob 对象，将此 blob 编码为 base64，然后将数据放入我的img.src。

之后，我需要使用 jquery ajax 将这些数据发送到 PHP。

base64data 非常大，大概有 2 000 000 个字符，所以 ajax 请求非常长（20-50 秒）。

我只是这样发送数据：

var gif = $('.generated-img').attr('src').replace('data:image/gif;base64,', '');        
    gif = gif.match(/.{1,500000}/g);
    $.ajax({
        type:"POST",
        url: "/webcam/",
        data: {image_gif:gif, crop_x:x, crop_y:y, crop_w:w, crop_h:h, gif:true},
        success: function () {
            parent.$.fancybox.close();
        }
    });

我需要将数据分成几块，每块 500 000 个字符。

但它太长了.. 我该怎么做才能优化呢？我只需要将这些数据检索到我的 php 脚本中以做一些事情...

Answer 1

我不明白为什么需要拆分它；使用 AJAX（其中 A 代表异步）的想法正是您可以在后台做大而慢的事情。

但我不会使用正则表达式进行拆分，而是使用 substr 将其分解，例如类似的东西（未经测试，因此可能是偏移错误 - 例如，您可能需要+ 1 或- 1 在这里和那里）：

 var chunkSize = 500000;
 var chunkId = 0;
 var isLastChunk = false;
 for(var i = 0; i < gif.length; i += chunkSize)
 {
    var chunk;
    if(gif.length > i + chunkSize) {
      chunk = gif.substr(0, i, chunkSize);
    } else {
      chunk = gif.substr(0, i);
      isLastChunk = true;
    }

    $.ajax({
        type:"POST",
        url: "/webcam/",
        data: {
          chunk: chunk, chunkId: chunkId, isLastChunk: isLastChunk,
          crop_x:x, crop_y:y, crop_w:w, crop_h:h, gif:true},
        success: function () {
           // Chunk handled succesfully
        }
    });
 }

在/webcam/ 中，您可以查看chunkId 和isLastChunk。