Вызов REST API для получения изображений

Question

Я звоню REST API из моего кода Vue, как показано ниже

let file = BASEURL + 'download/' + docId;

let headers = new Headers();
headers.append('Authorization', 'Bearer ' + TOKEN);
headers.append('Accept', 'application/json');

fetch(file, { headers })
.then(response => {return response.data})

Ожидаемые данные - это изображение base64, но я получаю ненужные данные. Чего мне не хватает?

Когда я смотрю на вкладку «Сеть» в инструментах разработчика, я получаю

ÿØÿàJFIFÿÛC

ÿÛC

ÿÀX "ÿÄ !ÄB! 1AQ" a2q # BR¡ ± ÁÑ3b $ Cráðñ% 4S²ÿÄÿÄ5! 1 "AQ2aq # ¡B ± ÁÑ3áðñR $ ÿÚ? \ ÈÍk ~ £ C + .cµHIírrI1ø # 1012

Answer 1

Таким образом, проблема заключается в том, что сервер использует общий тип MIME для возврата файла, например application/octet-stream, в отличие от правильного типа MIME для конкретного изображения, который будет image/jpg.Это объясняет, почему браузер не может отобразить изображение, и вместо этого вы получаете то, что вы считаете «мусором» (на самом деле это просто ASCII-представление двоичного содержимого изображения).

Учитывая, что это файл, ипоэтому в потоке вы можете использовать функцию blob () объекта ответа для чтения данных.На самом деле есть хороший пример того, как загрузить изображение с помощью API Fetch и преобразовать его в изображение, которое вы сможете настроить в соответствии со своими потребностями:

const image = document.querySelector('.my-image');
fetch('flowers.jpg').then(function(response) {
  return response.blob();
}).then(function(blob) {
  const objectURL = URL.createObjectURL(blob);
  image.src = objectURL;
});

Answer 2

Вы выводите необработанный двоичный ответ.

Видя, что вы пытаетесь получить доступ к свойству данных, я предполагаю, что формат ответа - это строка JSON со свойством данных, которое представляет собой строку base64, представляющую изображение.

fetch(file, {
    headers: {
        'Authorization': 'Bearer ' + TOKEN,
        'Accept': 'application/json'
    }
}) // Get data from endpoint
.then(response => response.json()) // Parse response as JSON
.then(response => response.data) // Get data property from response object

Если весь ответ представляет собой строку base64 вместо объекта JSON со строкой base64, вы можете сделать следующее.

fetch(file, {
    headers: {
        'Authorization': 'Bearer ' + TOKEN,
        'Accept': 'plain/text'
    }
}) // Get data from endpoint
.then(response => response.text()) // Parse response as plain text

Также, как показано выше, вы должны указатьсервер, какой формат ответа вы ожидаете, используя заголовок Accept.