如何上传RecordRTC BLOB文件到Rails的回形针在AJAX [英] How to upload RecordRTC blob file to Rails paperclip in AJAX

问题描述

在客户端，用户使用 RecordRTC 录制视频短片。当用户presses上传，我会得到该视频的斑点使用数据 recorder.getBlob（），和把它上传到我的服务器（使用Rails和回形针来处理文件上传）。

On the client side, the user uses RecordRTC to record a short video. When the user presses upload, I will get the video's blob data using recorder.getBlob(), and upload it to my server (using Rails and paperclip to handle file upload).

起初，我想改变＆LT;输入类型='文件'＆GT; 字段值的 BLOB 数据。事实证明，安全浏览器中，我不能使用JavaScript改变它。

At first, I wanted to change the <input type='file'> field value to the blob data. It turns out that for security in browsers, I cannot change it using javascript.

于是，我试图用AJAX：

Then, I tried to use 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.");
        }
    };
});

但是，它不能正常工作在登录文件，我将获得以下，无法处理：

However, it does not work. On log file, I will get the following, which cannot be handled:

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

如果我提交通常使用表格，我将有参数，如下所示：

If I submit normally using form, I will have parameters look like this:

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>>
}

我怎么能解决这个问题？

How could I solve the problem?

非常感谢。

推荐答案

在最后，问题的原因是 BLOB 文件从 recorder.getBlob（）不是一个真正的 BLOB 。请参阅从 muaz汗的答案。

In the end, the cause of problem is that the blob file returned from recorder.getBlob() is not an actual blob. Refer to the answer from muaz-khan.

我添加RecordRTC以下几行，以获得真正的 BLOB 和做同样的AJAX提交。现在一切工作。

I added the following lines in RecordRTC to get the real blob and do the same AJAX submitted. Everything work now.

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

这篇关于如何上传RecordRTC BLOB文件到Rails的回形针在AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！