Модель вывода ng-file-upload содержит только $ ngfBlobName, но загрузка файлов выполняется нормально

Я использую 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 изображения.

Если я загружаю изображение, которое вызывает проблемы с обычным input type = "file", и просматриваю его с помощью FileReader API (конвертируя его в base64 ..), оно отображается нормально.

Кто-нибудь сталкивался с чем-нибудь подобным?

Если я войду в файловую систему, проблемное изображение будет иметь несколько свойств, которых нет у «других изображений», например:

«Производитель устройства», «Модель устройства», «Цветовой профиль», «Фокусное расстояние», «Красные глаза», «Число F», «Программа экспозиции», «Время экспозиции»

Итак, на Mac я щелкнул изображение правой кнопкой мыши и выбрал «дополнительная информация», чтобы увидеть эти свойства.

Как сервер получает данные изображения для этого изображения ?!


javascript file-upload angularjs ng-file-upload
person Lee Brindley    schedule 28.04.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Чтобы исправить это, я добавил вызов ngf-change к директиве ng-file-upload и проверил, присутствует ли ngfBlobUrl.

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

Это работает, изображение теперь представлено мне в предварительном просмотре и загружается нормально.

person Lee Brindley    schedule 28.04.2016