javascript - 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"
 }

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

如果我上传给常规输入 type="file"带来问题的图像并使用 FileReader API 预览它(将其转换为 base64..)，那么它会显示得很好。

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

如果我进入文件系统，有问题的图像具有一些“其他图像”没有的属性，例如:

'设备品牌', '设备型号', '颜色配置文件', '焦距'， '红眼睛'， 'F 数', “曝光计划”， “曝光时间”

因此，在 Mac 上，我右键单击图像并选择“更多信息”来查看这些属性。

服务器如何获取该图像的图像数据？!

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){});
                }
            });
        };

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