如何在 ASP.NET MVC C# 中从 SQL Server 数据库流式传输 mp3 文件

Question

如何将 mp3 文件从 SQL Server 数据库流式传输到 C# 中的 ASP.NET MVC 视图？

我能够成功地从数据库中检索文件，但我没有 知道需要将哪些数据传递给视图以及我需要传递哪些属性 放。我已经尝试在视图中使用数据源，但仍然得到一个 运行应用程序时“找不到文件”。

我不确定数据源应该是什么。当我将数据源设置为本地 mp3 文件的路径时，它工作正常。

当我运行应用程序时，我得到一个“未找到文件”

ASP.NET MVC 控制器：

using (SqlDataReader dr = cmd.ExecuteReader())
{
    while (dr.Read())
    {
        var mp3 = new Mp3Files
                {
                    DATA = (Byte[])dr["DATA"],
                    DATASCOURCE = dr
                };
        list.Add(mp3);
    }

    foreach (var item in list)
    {
        Mp3FilesList.Add(item);
    }

    return View("Loops", "_Layout", Mp3FilesList);
}

查看：

<div data-thumb="Scripts/img/adg3.jpg" data-type="audio" 
     class="audioplayer-tobe skin-wave " 
     data-source="@item.DATASCOURCE" data-
     scrubbg="../Scripts/waves2/adg3_mp3.png" data-
     scrubprog="Scripts/waves2/wavesprog.png" data-
     playfrom="last">

Mp3Files类：

{
    public int AUDIO_ID { get; set; }
    public string NAME { get; set; }
    public string CONTENT_TYPE { get; set; }
    public string BPM { get; set; }
    public string CATEGORY { get; set; }
    public Byte[] DATA { get; set; }
    public DbDataReader DATASCOURCE { get; set; }
}

Answer 1

我知道这篇文章已经很老了，但由于有人可能会在谷歌研究后来到这里，我将分享我解决的方法。

您有两种选择：通过 MVC（如果您的页面中包含大量声音，则不友好）或 JQuery（例如，您可以创建加载动画以向用户提供友好的等待消息或微调器）。

选项 1 - MVC（我使用了您的视图（循环）的名称和您发布的代码）：

public ActionResult Loops()
{
    PageViewModel result = new PageViewModel();
    IDataReader dr = null; // some SQL Search
    result.Files = new List<Mp3File>();

    while (dr.Read())
    {
        result.Files.Add(new Mp3File()
        {
           Id = int.Parse(dr["Id"].ToString()),
           Name = dr["Name"].ToString(),
           ContentType = dr["ContentType"].ToString(), //must be something like audio/mp3 for example
           Category = dr["Category"].ToString(),
           Data = (Byte[])dr["Data"]
        });
    }

    return Json(result, JsonRequestBehavior.AllowGet);
}

然后，在您的 CSHTML 文件中，您遍历 ViewModel 的 files 属性并将数据指向音频 HTML 元素的源：

if (Model.Files?.Count > 0)
{
    <div class="list">
    @for (var i = 0; i < Model.Files.Count; i++)
    {
        <!-- AUDIO ITEM -->
        <label class="item">
            <span class="title"><i class="far fa-file-audio"></i> @Model.Files[i].Name</span>
            <audio controls>
                <source src="@Model.Files[i].Data" type="@Model.Files[i].ContentType" />
            </audio>
        </label>
    }
    </div>
}

JQuery 解决方案：在我个人看来，这个选项更好，因为它更加用户友好并且不会导致长时间等待的白页：

1) 如果可能，请将您的文件存储在您的网络服务器中，因为加载过程会更快；

2) 在控制器中创建一个 HTTP Get 方法

    [HttpGet]
    public ActionResult GetFiles()
    {
         PageViewModel result = new PageViewModel();
         IDataReader dr = null; // some SQL Search
         result.Files = new List<Mp3File>();

         while (dr.Read())
         {
             result.Files.Add(new Mp3File()
             {
                Id = int.Parse(dr["Id"].ToString()),
                Name = dr["Name"].ToString(),
                ContentType = dr["ContentType"].ToString(), //must be something like audio/mp3 for example
                Category = dr["Category"].ToString(),
                Data = (Byte[])dr["Data"],
                Url = $"{Request.Url.GetLeftPart(UriPartial.Authority)}/assets/audio/{Path.GetFileNameWithoutExtension(dr["Name"].ToString())}.mp3" //in case you stored your file in your web server
              });
          }

          return Json(result, JsonRequestBehavior.AllowGet);
    }

3) 在您的 CSTHML 页面中创建一个 javascript 函数来加载您的文件

//In this example I'm using local JS for JQuery and Bootstrap. But you can use the way you prefer (CDN or NPM for example)
<!-- SCRIPTS -->
<script src="~/assets/js/jquery-3.3.1.slim.min.js"></script>
<script src="~/assets/js/bootstrap.min.js"></script>
<script>

    $(document).ready(function () {
        loadFiles();
    });

    function loadFiles() {

        //here I'm referencing a DIV tag that uses the spinner.js has the following content:
        $("#spinner").show(); 

            //<div class="wrapper-loading" id="spinner" style="display:none;">
            //    <span class="spinner-double-section-far"></span>
            //</div>

        $.ajax({
            async: true,
            url: "GetFiles",
            cache: false,
            dataType: "json",
            success: function (data) {

                $("#spinner").hide(); //stop spinner

                if (data) {
                    $("#audioContainer").show();

                    data.Files.forEach(audio => {
                        var newAudio = '<label class="item">';
                        newAudio += '<span class="title"><i class="far fa-file-audio"></i>' + audio.Name + '</span>';
                        newAudio += '<audio controls><source src="' + audio.Url + '" type="audio/mp3"/>';
                        newAudio += '</audio></label>';
                        $("#audioContainer").append(newAudio); //JQuery command to insert new HTML into some Element
                    });
                }
            },
            error: function (error) {
                $("#spinner").hide(); //stop spinner
                alert(JSON.stringify(error));
            }
        });
    }
</script>

这就是我使用标准 AUDIO HTML 控件在我的页面中放入一些音频文件所需的全部内容，该控件具有播放、暂停等嵌入式控件。

祝你好运，希望对你有所帮助。