Question

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

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

在这里，我将专注于下载部分。基本上我正在做的是：

从SQL Server varbinary字段读取大块数据
Web API 2 api返回文件名，mime类型和字节数据作为base64字符串。注意-尝试返回字节数组，但Web API仍然将其序列化为base64字符串。
连接块，将块转换为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"];
...

网络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;

甚至可以通过流媒体对此进行改进

使用Web API分块检索文件数据以在浏览器（WIP）中显示

1 个答案: