如何在AJAX中将RecordRTC blob文件上传到Rails回形针

Question

在客户端，用户使用RecordRTC录制短视频。当用户按下上载时，我将使用来获取视频的blob数据recorder.getBlob()，并将其上载到我的服务器（使用Rails和回形针处理文件上载）。

首先，我想将<input type='file'>字段值更改为blob数据。事实证明，为了确保浏览器的安全性，我无法使用javascript对其进行更改。

然后，我尝试使用AJAX：

$("#ajax-submit").on("click", function() {
    var data = new FormData();

    data.append("record[video]", recorder.getBlob(), (new Date()).getTime() + ".webm");

    var oReq = new XMLHttpRequest();
    oReq.open("POST", "/records/");
    oReq.send(data);
    oReq.onload = function(oEvent) {
        if (oReq.status == 200) {
            console.log("Uploaded");
        } else {
            console.log("Error " + oReq.status + " occurred uploading your file.");
        }
    };
});

但是，它不起作用。 在log档案上，我将得到以下内容，无法处理：

Processing by RecordsController#create as */*
Parameters: {
  "video"=>"data:video/webm;base64,GkXfo0AgQoaBAUL3gQFC8o..."
}

如果我正常使用提交form，则参数将如下所示：

Processing by RecordsController#create as HTML
Parameters: {
    "video"=>#<ActionDispatch::Http::UploadedFile:0x3b476e0 @original_filename="testing.mp4", @content_type="video/mp4", @headers="Content-Disposition: form-data; name=\"record[video]\"; filename=\"testing.mp4\"\r\nContent-Type: video/mp4\r\n", @tempfile=#<File:a_path>>
}

我该如何解决这个问题？

非常感谢。

Answer 1

最后，问题的原因是blob从传回的档案recorder.getBlob()不是实际的blob。请参阅muaz-
khan
的答案。

我在RecordRTC中添加了以下几行，以获取真实内容blob并执行相同的AJAX提交。现在一切正常。

         getBlob: function () {
             return blobURL2;
         },
+        getRealBlob: function() {
+            return blobURL;
+        },