Загрузите файл PNG, служащий двоичным файлом / потоком октетов - PullRequest
Новая
       17

Загрузите файл PNG, служащий двоичным файлом / потоком октетов

0 голосов
/ 29 марта 2020

enter image description here шаги, которые будут воспроизводить проблему:

Я сохраняю объект Blob как данные формы, используя службу, и я получаю ответ как тип содержимого: application / Поток октетов как на прикрепленном изображении

Каков ожидаемый результат?

  • Для загрузки и просмотра потока приложений / октетов в виде изображения на локальный компьютер машина и просматривать его с помощью приложений

Что происходит вместо этого?

возможность загрузить файл в виде изображения, но он говорит, что мы не поддерживаем этот формат файла, хотя его ( Например: image.png) 

function add() {
  $.ajax({
  url: 'https://localhost:3000/upload/sampleImage.png',
  type: 'GET',
  success: function (data) {
    const link = document.createElement('a');
    link.style.display = 'none';
    link.download = "sample image";
     link.href =  
       'data:' +
       'image/png' +
       ';base64,' +
       window.btoa(unescape(encodeURIComponent(data)));
    link.click();
  },
  error: function (request, error) {
    alert("Request: " + JSON.stringify(request));
  }
});

}

Любые способы загрузить файл и предварительно просмотреть его

1 Ответ

0 голосов
/ 29 марта 2020

Установите responseType как blob в запросе

Используя HttpClient: 

this.http.get("https://localhost:3000/upload/sampleImage.png",{responseType:'blob'}).subscribe((img)=>{
        const link = document.createElement('a');
        link.style.display = 'none';
        link.download = "sample image";
         link.href =window.URL.createObjectURL(data);
        link.click();
  });

Теперь используйте $. ajax (не рекомендуется, избегайте его использования) укажите dataType как BLOB-объект и использовать window.URL.createObjectURL(data) для создания URL 

 $.ajax({
  url: 'https://localhost:3000/upload/sampleImage.png',
  type: 'GET',
  xhrFields:{
            responseType: 'blob'
        },
  success: function (data) {
    const link = document.createElement('a');
    link.style.display = 'none';
    link.download = "sample image";
    var blob = new Blob([data], {type: 'image/png'});
    link.href =window.URL.createObjectURL(blob);
    link.click();
  },
  error: function (request, error) {
    alert("Request: " + JSON.stringify(request));
  }
...