Typescript / .Net Core: загруженный формат файла jpg/png не поддерживается

У меня проблемы с просмотром загруженных файлов png/jpg, файл загружается правильно, но не может быть просмотрен. Я думаю, это может быть связано с тем, как я сохраняю объект в машинописном тексте, или с типами заголовков контента?

Серверная часть: веб-API .Net Core 6.0

Фронтенд: Vue 3

Это результат попытки открыть скачанный образ:

Трассировка Fiddler показывает изображение, отправляемое с сервера:

Вот как я загружаю файл в TS:

await someService
.download(item.url, item.name)
.then(async (r: any) => {
  const blob = new Blob([r.data]);
  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  const disposition = r.request.getResponseHeader("Content-Disposition");
  if (disposition && disposition.indexOf("attachment") !== -1) {
    const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
    let matches = filenameRegex.exec(disposition);
    if (matches != null && matches[1]) {
      link.download = matches[1].replace(/['"]/g, "");
    }
  }
  link.click();
  URL.revokeObjectURL(link.href);
})
.catch((err: any) => {
  showError(err);
});

Вот как сервер отправляет свой ответ:

public IActionResult DownloadAttachmentAsync([FromQuery] DownloadAttachmentInputDto model)
{
    try
    {
        FileStream fs = new FileStream(_pathToFile, FileMode.Open);
        return File(fs, "image/png", model.FileName);
    }
    catch (Exception err)
    {
        _errorHandler.Error(_loggedInUser, err);
        return BadRequest(_errorHandler.UserFriendlyErrorMessage(err));
    }
}

образец заголовка ответа (другой файл):

Не уверен, где еще искать, любая помощь очень ценится!

Я пробовал загружать другие типы файлов (например, text/pdf/zip), и они загружались без проблем.

OverMars 20.11.2022 06:05

Ответ сервера говорит: Content-Type: application/octet-stream. Таким образом, сервер говорит, что контент представляет собой общий файл для загрузки, а не изображение. Я думаю, может быть, это вызывает проблему. Просмотрите эту ссылку для более подробной информации об этом.

Chen 22.11.2022 09:56

Обновленный вопрос ... К сожалению, это не помогло, и снова скрипач отлично показывает содержимое. В данном случае я убедился, что это расширение png (и установил тип изображения/png). Очень ценю помощь, застрял на несколько дней и до сих пор не знаю, где искать!

OverMars 23.11.2022 00:17

"Это результат попытки открыть загруженное изображение", чем вы на самом деле пытаетесь открыть изображение?

Jon P 23.11.2022 00:20

Программное обеспечение для редактирования нескольких изображений ... MS Paint ... изображение из Windows 10, встроенное в PhotoViewer ... но я пробовал Paint, Adobe ... даже загрузил его на другой компьютер на всякий случай.

OverMars 23.11.2022 01:01

не могли бы вы проверить, помогает ли эта ссылка. responseType важно, когда вы работаете с файлами типа pdf, изображения.

Ankit.Z 23.11.2022 12:06

Вероятно, помогает возврат FileContentResult вместо File. Или используя [Produces(MediaTypeNames.Application.Octet)] в качестве декоратора. Кроме того, как указывалось ранее, если вы используете Axios, установите для параметра responseType значение «blob» в запросе GET. URL.createObjectURL должен иметь возможность напрямую использовать результат.

cwillinx 24.11.2022 00:05

Господа, я не могу отблагодарить вас за вашу помощь, у меня наконец-то появилась возможность просмотреть комментарии... проблема заключалась в отсутствующем типе ответа! @AZ У тебя было предложение первым, награда твоя. Спасибо вам всем!

OverMars 24.11.2022 01:58
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
8
148
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Для тех, кто наткнется на подобный тип проблемы.

Всякий раз, когда вы хотите загрузить pdf/image тип документов во внешнем интерфейсе, необходимо определить responseType:blob для вашего вызова API.

Я подробно объяснил это здесь

Другие вопросы по теме