使用 Web API 检索块中的文件数据以在浏览器中显示 (WIP)

Question

我有这个工作，但我想分享一下，看看我是否遗漏了任何明显的东西，并解开为什么我的文件块大小必须是 2049 的倍数的谜团。主要要求是：

• 从网站上传的文件必须存储在 SQL Server 中，而不是作为文件
• 网站必须能够下载文件数据并将其显示为文件（在单独的窗口中打开。
• 网站是 angularjs/javascript SPA，没有服务器端代码，没有 MVC
• API 是 Web API 2（同样不是 MVC）

这里我只关注下载部分。基本上我正在做的是：

1. 从 SQL server varbinary 字段读取数据块
2. Web API 2 api 将文件名、mime 类型和字节数据作为 base64 字符串返回。注意 - 尝试返回字节数组，但 Web API 只是将其序列化为 base64 字符串。
3. 连接块，将块转换为 blob 并显示

返回带有块的数据集的VB库函数（我必须使用这个处理数据库连接但不支持参数查询的库）

Public Function GetWebApplicationAttachment(ByVal intId As Integer, ByVal intChunkNumber As Integer, ByVal intChunkSize As Integer) As DataSet

    ' the starting number is NOT 0 based
    Dim intStart As Integer = 1
    If intChunkNumber > 1 Then intStart = ((intChunkNumber - 1) * intChunkSize) + 1
    Dim strQuery As String = ""
    strQuery += "SELECT FileName, "
    strQuery += "SUBSTRING(ByteData," & intStart.ToString & "," & intChunkSize.ToString & ") AS ByteData "
    strQuery += "FROM FileAttachments WHERE Id = " + intId.ToString + " "
    Try
        Return Query(strQuery)
    Catch ex As Exception
        ...
    End Try
End Function

从数据集创建文件对象的 Web API 业务规则位

...
    result.FileName = ds.Tables[0].Rows[0]["FileName"].ToString();
    // NOTE: Web API converts a byte array to base 64 string so the result is the same either way
    // the result of this is that the returned data will be about 30% bigger than the chunk size requested
    result.StringData = Convert.ToBase64String((byte[])ds.Tables[0].Rows[0]["ByteData"]);
    //result.ByteData = (byte[])ds.Tables[0].Rows[0]["ByteData"];
    ... some code to get the mime type
    result.MIMEType = ...

Web API 控制器（简化 - 删除所有安全和错误处理）

public IHttpActionResult GetFileAttachment([FromUri] int id, int chunkSize, int chunkNumber) {
    brs = new Files(...);
    fileResult file = brs.GetFileAttachment(appID, chunkNumber, chunkSize);
    return Ok(file);
}

angularjs 递归获取块并将它们放在一起的服务

    function getFileAttachment2(id, chunkSize, chunkNumber, def, fileData, mimeType) {
        var deferred = def || $q.defer();
        $http.get(webServicesPath + "api/files/get-file-attachment?id=" + id + "&chunkSize=" + chunkSize + "&chunkNumber=" + chunkNumber).then(
            function (response) {
                // when completed string data will be empty
                if (response.data.StringData === "") {
                    response.data.MIMEType = mimeType;
                    response.data.StringData = fileData;
                    deferred.resolve(response.data);
                } else {
                    if (chunkNumber === 1) {
                        // only the first chunk computes the mime type
                        mimeType = response.data.MIMEType;
                    }
                    fileData += response.data.StringData;
                    chunkNumber += 1;
                    getFileAttachment2(appID, detailID, orgID, GUID, type, chunkSize, chunkNumber, deferred, fileData, mimeType);
                }
            },
            function (response) {
                ... error stuff
            }
        );
        return deferred.promise;
    }

进行调用的角度控制器方法。

    function viewFile(id) {
        sharedInfo.getWebPortalSetting("FileChunkSize").then(function (result) {
            // chunk size must be a multiple of 2049 ???
            var chunkSize = 0;
            if (result !== null) chunkSize = parseInt(result);
            fileHelper.getFileAttachment2(id, chunkSize, 1, null, "", "").then(function (result) {
                if (result.error === null) {
                    if (!fileHelper.viewAsFile(result.StringData, result.FileName, result.MIMEType)) {
                        ... error
                    }
                    result = {};
                } else {
                    ... error;
                }
            });
        });
    }

最后是显示文件为下载的 javascript

    function viewAsFile(fileData, fileName, fileType) {
        try {
            fileData = window.atob(fileData);
            var ab = new ArrayBuffer(fileData.length);
            var ia = new Uint8Array(ab);    // ia provides window into array buffer
            for (var i = 0; i < fileData.length; i++) {
                ia[i] = fileData.charCodeAt(i);
            }
            var file = new Blob([ab], { type: fileType });
            fileData = "";
            if (window.navigator.msSaveOrOpenBlob) // IE10+
                window.navigator.msSaveOrOpenBlob(file, fileName);
            else { // Others
                var a = document.createElement("a"),
                    url = URL.createObjectURL(file);
                a.href = url;
                a.download = fileName;
                document.body.appendChild(a);
                a.click();
                setTimeout(function () {
                    document.body.removeChild(a);
                    window.URL.revokeObjectURL(url);
                }, 0);
            }
            return true;
        } catch (e) {
            ... error stuff
        }
    }

我已经看到一种更 RESTful 的方法是使用标头来指示块范围并将文件元数据与文件块分开。我也可以尝试返回数据流而不是 Base64 编码的字符串。如果有人有这方面的建议，请告诉我。

Answer 1

这完全是错误的做法。万一这对我有帮助，这就是我最终要做的。

• 动态创建锚标记的 href 地址以返回文件（查询字符串中的安全令牌和参数）
• 从数据库中获取字节数组
• web api 调用返回响应消息（见下方代码）

这更快、更可靠，但提供的进度监控方式更少。

业务规则方法使用...

...
file.ByteData = (byte[])ds.Tables[0].Rows[0]["ByteData"];
...

web api 控制器

public HttpResponseMessage ViewFileAttachment([FromUri] int id, string token) {
    HttpResponseMessage response = new HttpResponseMessage();
    ... security stuff
    fileInfoClass file = ... code to get file info
    response.Content = new ByteArrayContent(file.ByteData);
    response.Content.Headers.ContentDisposition =
        new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment") {
            FileName = file.FileName
        };
    response.Content.Headers.ContentType = new MediaTypeHeaderValue(file.MIMEType);
    return response;

这甚至可以通过流媒体来改善