使用来自服务器的 blob 数据和 ng-file-upload？

Question

我有一个用例，在使用 ng-file-upload 上传图像后，服务器现在正在生成缩略图并根据请求，return 文件的 base64 字符串（缩略图，非常小到2K）。

这工作得很好；但是，我还希望能够将该 blob 与 ng-file-upload 一起用于其他用途，例如 ngf-src 或 ngf-background。但我不确定具体如何。

我目前正在使用它来请求和生成 blob（为简洁起见缩短了控制器）：

$http({
    url: appconfig.serviceUrl + ":" + appconfig.port + "/api/file/" + fileName,
    method: 'GET',
    cache: true,
    headers: { 'Content-Type': 'application/json' }
}).then(function (response) {
    var apiURL = (window.createObjectURL && window) || (window.URL && URL.revokeObjectURL && URL) || (window.webkitURL && webkitURL);
    var blob = new Blob([response.data], { type: 'image/jpg' });
    blob.src = response.data;
    blob.url = apiURL.createObjectURL(blob);
    deferred.resolve(blob);
}, function (error) {
    deferred.reject(error);
}));

在我的 HTML 部分中，我可以使用以下内容在任何浏览器中轻松显示 blob（其中 controlleras 是 'vm' 并且 blob 最终进入范围 vm.img ):

<img ng-src="data:image/jpg;base64,{{vm.img.src}}" type="image/jpg" width="320" height="180"/>

我意识到这可能不是 blob 的正确格式，我只是在学习使用它们。

我试过如下操作：

var file = new File([blob], fileName, { type: 'image/jpg' });

虽然 Chrome 和 FireFox 似乎能够生成文件，但 IE11 会抛出 "TypeError: Object doesn't support this action"...

我现在如何创建一个 'file' 用于 ng-models 以供 ng-file-upload 使用和使用？

另一方面，起初我只能根据请求将文件作为流从服务器发送。但是，它是一个带有 exif 数据的本机文件（字节数组？）。我可以 'not' 想出将它与 ng-file-upload 一起使用 :(

Answer 1

您可以只使用 ngf-src 或 ngf-background 的字符串，因此无需将数据 url 转换为 Blob。你可以有这样的东西：

ngf-src="fileBlob || fileDataUrlString"

通常最好将 url 字符串和浏览器选择的实际 blob 文件分开保存，因为出于浏览器的安全考虑，您无法真正以编程方式设置文件输入的值。

使用来自服务器的 blob 数据和 ng-file-upload？

use blob data from server with ng-file-upload?

ng-file-upload