У меня проблемы с просмотром загруженных файлов 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));
}
}
образец заголовка ответа (другой файл):
Не уверен, где еще искать, любая помощь очень ценится!
Ответ сервера говорит: Content-Type: application/octet-stream
. Таким образом, сервер говорит, что контент представляет собой общий файл для загрузки, а не изображение. Я думаю, может быть, это вызывает проблему. Просмотрите эту ссылку для более подробной информации об этом.
Обновленный вопрос ... К сожалению, это не помогло, и снова скрипач отлично показывает содержимое. В данном случае я убедился, что это расширение png (и установил тип изображения/png). Очень ценю помощь, застрял на несколько дней и до сих пор не знаю, где искать!
"Это результат попытки открыть загруженное изображение", чем вы на самом деле пытаетесь открыть изображение?
Программное обеспечение для редактирования нескольких изображений ... MS Paint ... изображение из Windows 10, встроенное в PhotoViewer ... но я пробовал Paint, Adobe ... даже загрузил его на другой компьютер на всякий случай.
не могли бы вы проверить, помогает ли эта ссылка. responseType
важно, когда вы работаете с файлами типа pdf, изображения.
Вероятно, помогает возврат FileContentResult
вместо File
. Или используя [Produces(MediaTypeNames.Application.Octet)] в качестве декоратора. Кроме того, как указывалось ранее, если вы используете Axios, установите для параметра responseType значение «blob» в запросе GET. URL.createObjectURL должен иметь возможность напрямую использовать результат.
Господа, я не могу отблагодарить вас за вашу помощь, у меня наконец-то появилась возможность просмотреть комментарии... проблема заключалась в отсутствующем типе ответа! @AZ У тебя было предложение первым, награда твоя. Спасибо вам всем!
Для тех, кто наткнется на подобный тип проблемы.
Всякий раз, когда вы хотите загрузить pdf/image
тип документов во внешнем интерфейсе, необходимо определить responseType:blob
для вашего вызова API.
Я подробно объяснил это здесь
Я пробовал загружать другие типы файлов (например, text/pdf/zip), и они загружались без проблем.