用asp.net mvc core保存blob文件（audioogg）。

Question

一定是个简单的问题，但我已经为这个问题苦恼了一个星期。我有一个超级简单的基于jquery的音频捕获--我只是想把它保存为一个基于控制器动作的文件。问题是我不知道如何将blob文件传递给控制器。这是我捕捉音频的代码（见下图）。对于图像，我可以只使用

document.getElementById("canvas").toDataURL("imageepng")。

然后把它传给控制器并保存为图片，就像这样。

   using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
    {
        using (BinaryWriter bw = new BinaryWriter(fs))
        {
            byte[] data = Convert.FromBase64String(imageData);
            bw.Write(data);
            bw.Close();
        }
        fs.Close();
    }

所以理想情况下，我希望能有类似于保存图片的方法。

$(function () {
    $('body').append(
        $('<button/>')
            .attr("id", "start")
            .html("start")
    ).append(
        $('<button/>')
            .attr("id", "stop")
            .html("stop")
    ).append(
        $('<div/>').
            attr("id", "ul")
    )
 
    let log = console.log.bind(console),
        ul = $('#ul')[0],
        start = $('#start')[0],
        stop = $('#stop')[0],
        stream,
        recorder,
        counter = 1,
        chunks,
        media;
    media = {
        tag: 'audio',
        type: 'audio/ogg',
        ext: '.ogg',
        gUM: { audio: true }
    }
    navigator.mediaDevices.getUserMedia(media.gUM).then(_stream => {
        stream = _stream;
        recorder = new MediaRecorder(stream);
        recorder.ondataavailable = e => {
            chunks.push(e.data);
            if (recorder.state == 'inactive') makeLink();  
        };
        log('got media successfully');
    }).catch(log);


    start.onclick = e => {
        start.disabled = true;
        stop.removeAttribute('disabled');
        chunks = [];
        recorder.start();
    }


    stop.onclick = e => {
        stop.disabled = true;
        recorder.stop();
        start.removeAttribute('disabled');
    }
    function makeLink() {
        let blob = new Blob(chunks, { type: media.type })
            , url = URL.createObjectURL(blob)
            , div = document.createElement('div')
            , mt = document.createElement(media.tag)
            , hf = document.createElement('a')
            ;
        mt.controls = true;
        mt.src = url;
        hf.href = url;
        hf.download = `${counter++}${media.ext}`;
        hf.innerHTML = `donwload ${hf.download}`;
        div.appendChild(mt);
        ul.appendChild(div);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

非常感谢

Answer 1

所以，万一有其他人偶然发现，正如预期的那样，它是相当简单的（不是最干净的代码，但在这里你去）。

创建一个新的Blob值。

        recorder.ondataavailable = e => {
        chunks.push(e.data);
        superBuffer = new Blob(chunks, { type: 'audio/ogg' });
        if (recorder.state == 'inactive') makeLink(); //console.log(e.data)

然后用Ajax将其发送到服务器

            var reader = new window.FileReader();
            reader.readAsDataURL(superBuffer);

            reader.onloadend = function () {
                base64 = reader.result;
                base64 = base64.split(',')[1];

                $.ajax({
                    url: 'MyController/Action1',
                    type: 'POST',
                    data: {
                        audioname: "hello",//obviously change to something dynamic
                        chunks: base64
                    },
                    success: function (response) { console.log(response); },
                    error: function (response) { console.log(response); }
                });

然后在代码后面:

        [HttpPost]
    public IActionResult Action1(string audioname, string chunks)
    {

        string fileNameWitPath = Path.Combine(_hostingEnvironment.WebRootPath, "audio", "test.ogg");

        using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
        {
            using (BinaryWriter bw = new BinaryWriter(fs))
            {
                byte[] data = Convert.FromBase64String(chunks);
                bw.Write(data);
                bw.Close();
            }
            fs.Close();
        }
     return Content(chunks) ;//this is for testing - sends back full chunk on success, would probably just want some confirm all is good message
    }

注意，这是一个正在进行中的工作，很明显有很多东西需要填补，但总的来说，它的工作原理是：