ng-file-upload 输出模型只包含 $ngfBlobName 但文件上传正常

Question

我正在使用 ng-file-upload 将图像上传到我的网络服务器。

一旦用户选择了文件，我就会将它们显示在轮播中，然后用户可以手动将它们上传到服务器（通过提交按钮）。

部分图片未显示在轮播中。所述图像仍然可以正常上传到服务器并显示在前端，也就是说，预览中未显示的图像正在上传并正常显示在图库中（您可以看到图像）。

ng-file-upload 为图像输出的模型有所不同，预览中成功显示的图像包含人们所期望的：

 {
"$ngfBlobUrl": "blob:http%3A//localhost%3A4567/50df9cf5-1962-4903-8c82-02c847aadd16",
"$ngfWidth": 719,
"$ngfHeight": 837,
"$ngfDataUrl": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAICAgICAQICAgIDAgIDAwYEAwMDAwcFBQQGCAcJCAgHCAgJCg0LCQoMCggICw8LDA0ODg8OCQsQERA...(the rest has been removed)
 }

预览中未显示但仍成功上传（并在下载后显示在前端）的图像具有如下模型（由 ng-file-upload 提供）：

 {
    "$ngfName": "P9140214.jpg"
 }

所以这些不被预览是有道理的，因为预览中的 img 标签 HTML 使用“$ngfBlobUrl”作为图像的 src 属性。

如果我上传给常规输入类型带来问题的图像="file" 并使用 FileReader API 预览它（将其转换为 base64..）然后它显示得很好.

有没有人遇到过这样的事情？

如果我进入文件系统，有问题的图像有一些 'the other images' 没有的属性，例如：

'Device make', 'Device model', 'Color profile', 'Focal length', 'Red eye', 'F number', 'Exposure program', 'Exposure time'

所以在 Mac 上，我右击图像并选择 'more info' 以查看这些属性。

服务器如何获取此图像的图像数据？！

Answer 1

我最终解决这个问题的方法是向 ng-file-upload 指令添加一个 'ngf-change' 调用并检查 'ngfBlobUrl' 是否存在。

$scope.filesChanged = function ($files, $file, $event, $rejectedFiles) {
            $files.forEach(function (file) {
                if (!file["$ngfBlobUrl"]) {
                    Upload.dataUrl(file, false).then(function(url){});
                }
            });
        };

这有效，图像现在在预览中呈现给我，并且可以上传。

ng-file-upload 输出模型只包含 $ngfBlobName 但文件上传正常

ng-file-upload output model only contains $ngfBlobName but file uploads fine

javascript

angularjs

file-upload

ng-file-upload