Превращение ответа изображения с сервера в загружаемый файл - PullRequest
0 голосов
/ 27 сентября 2018

Я делаю ajax POST-вызов на мой сервер, генерирую уродливый URL удаленной загрузки, передаю его nginx с proxy_pass и затем передаю файл клиенту. Смотрите здесь для процесса. Изображение, кажется, делает его клиенту, я просто не могу загрузить его.

Как видно на скриншотах, предварительный просмотр ответа Chrome показывает jpeg,заголовки выглядят хорошо (вложение содержимого).

Как я могу превратить этот ответ в загружаемый файл для пользователя?

Response preview in chrome

Response headers

Logged response data

Я пробовал https://stackoverflow.com/a/23797348/5697126,, однако загружаемый файл поврежден и имеет размер 150% от реального изображения.Вот моя попытка, он загружает файл, но файл поврежден сообщением - Ошибка при интерпретации файла изображения JPEG (не файл JPEG: начинается с 0xef 0xbf)

const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
  const matches       = filenameRegex.exec(_responseHeaders['content-disposition']);
  let fileName        = '';
  if (matches != null && matches[1])
  {
    fileName = matches[1].replace(/['"]/g, '');
  }

  let fileType = _responseHeaders['content-type'];
  let blob     = new Blob([_response], {type: fileType});

  let URL         = window.URL || window.webkitURL;
  let downloadUrl = URL.createObjectURL(blob);

  if (fileName)
  {
    // use HTML5 a[download] attribute to specify filename
    let a = document.createElement('a');
    // safari doesn't support this yet
    if (typeof a.download === 'undefined')
    {
      window.location = downloadUrl;
    }
    else
    {
      a.href     = downloadUrl;
      a.download = fileName;
      document.body.appendChild(a);
      a.click();
    }
  }
  else
  {
    window.location = downloadUrl;
  }

  setTimeout(function ()
  {
    URL.revokeObjectURL(downloadUrl);
  }, 100); // cleanup

1 Ответ

0 голосов
/ 28 сентября 2018

Решено!

Мне нужно было установить тип ответа ajax (axios) на «blob», поскольку по умолчанию это json.Смотрите - https://github.com/axios/axios/issues/448

После того, как ответ был blob, я просто передал _response на URL.createObjectURL, а затем оставшаяся часть кода, который я разместил, работала как шарм

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...