小编典典

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

ajax

在客户端,用户使用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>>
}

我该如何解决这个问题?

非常感谢。


阅读 259

收藏
2020-07-26

共1个答案

小编典典

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

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

         getBlob: function () {
             return blobURL2;
         },
+        getRealBlob: function() {
+            return blobURL;
+        },
2020-07-26