AngularJS从后端获取“文件”到角度控制器并显示它

时间:2018-10-27 10:01:39

标签: angularjs

显示存储文件时遇到一些麻烦。 在设法将其保存到数据库中之后,我想还原它并在可能的情况下在新窗口或预览窗口/框中单击按钮显示。 我当前代码的问题是,我得到了一些东西,但没有显示图像。而且我不确定它的文件数据是否损坏或其他问题。

C#

public FileContentResult GetDocument(int id)
    {
        var db = new PetaPoco.Database("umbracoTicketConnectionString");
        FileModel file = db.SingleOrDefault<FileModel>("Select * from FileTable where ElementId=" + id);
        byte[] doc = file.BinaryFile;

        string fileName = file.name;
        Response.AppendHeader("Content-Disposition", "inline; filename=" + fileName);

        // when sending with JSON then maxJsonLength exception occurs.
        return File(doc, MimeMapping.GetMimeMapping(fileName));  
    }

JS

$scope.openFile = function () {
    var id = 1198;
    //var config = { responseType: 'blob' , id: 1198 }; // TODO
    $http.get("/umbraco/Surface/TicketFormSurface/GetDocument?id="+ id).then(function onSuccess(response) {
        console.log(response.data); 
        var binaryData = [];
        binaryData.push(response.data);
        var fileURL = URL.createObjectURL(new Blob(binaryData, { type: 'image/jpeg' }))
        window.open(fileURL);
    });
}

Console.log输出:

console output


已解决

我通过更改js控制器中的代码解决了该问题。

$scope.openFile = function () {
    var id = 1198;
    //var config = { responseType: 'blob' , id: 1198,  }; // TODO
    $http.get("/umbraco/Surface/TicketFormSurface/GetDocument?id="+ id, {
        headers: {
            'Content-Type': 'image/jpg'
        },
        responseType: 'blob'
        }).then(function onSuccess(response) {
        console.log(response.data); 
        var binaryData = [];
        binaryData.push(response.data);
        var fileURL = URL.createObjectURL(new Blob(binaryData, { type: 'image/jpeg' }))
        window.open(fileURL);
    });
}

0 个答案:

没有答案