Внешний интерфейс читает содержимое BLOB-объектов

JavaScript

Кратко

Из соображений безопасности внешний интерфейс не может напрямую записывать в файл. Однако в реальных бизнес-потребностях неизбежно приходится сталкиваться с загрузкой и предварительным просмотром различных файлов. Если файл загрузки сервера доставляется на внешний интерфейс в виде потока, внешний интерфейс обычно преобразует поток вobjectURL,заниматьaпомеченdownloadсвойства для загрузки файла. Но иногда возникает сценарий, когда обработка загружаемого файла не выполняется, поэтому возвращаемый формат сообщения сервера уже не поток, аjson, в настоящее время, несмотря на то, что внешний интерфейс может нормально экспортировать файл, содержимое файла представляет собой сообщение, возвращаемое сервером, и утилизация не очень уместна. В настоящее время хорошо иметь способ прочитать поток. В этой статье дается краткий обзор того, как внешний интерфейс читает двоичные потоки.

загрузка бинарного файла

Обычная загрузка бинарного файла: сначала нужно изменить заголовок запросаresponse-typeУстановить какblob, а во-вторых, при получении ответного сообщения могут быть вызваны следующие методы.

function download(blob) {
    // 创建一个blob链接
    let url = URL.createObjectURL(blob)
    let a = document.createElement('a')
    a.setAttribute('download', url)
    a.href=ur;
    a.style.display = 'none'
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    // 每次调用URL.createObjectURL,都会创建一个新的URL对象，浏览器内存中会保持对该对象的引用
    // 只有在document销毁时，才会释放此部分内存
    // 在考虑性能的情况下，在url使用结束后，最好释放此部分内存
    URL.revokeObjectURL(url)
}

чтение бинарных файлов

Выше приведен только общий метод загрузки бинарных потоковых файлов, когда тип ответа, возвращаемый серверомcontent-type=application/jsonКогда мы все еще имеем способ разбираться в обработке двоичной поток, могут привести к проблемам с содержимым файла экспорта, например Excel, содержимое ответа сервера сообщений, поэтому мы имеем дело с контентом ответа на сервер, необходимо выполнить в передней части перехватить.

  • объявить переменную блоба
    var debug = { hello: "world" };
    var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'})

blobСуществует два основных способа чтения контента.FileReaderа такжеResponse.

FileReader

FileReaderКак следует из названия, этот объект в основном используется для чтения содержимого файла, и совместимость относительно хорошая.Существуют следующие форматы для чтения содержимого:readAsArrayBuffer,readAsBinaryString,readAsDataURL,readdAsText.FileReaderМетод чтения в основном заключается в следующем:

  var reader = new FileReader()
  reader.addEventListener('loadend', function (e) {
    // 输出字符串 {hello: world}
    console.log(e.target.result)
  })
  reader.readAsText(blob)

Response

ResponseдаFetch APIИнтерфейс, который представляет ответ на запрос данных. Коэффициент совместимости браузераFileReaderпочти, поддерживаюChrome 42+,FireFox 39+.

Responseсоздавать экземпляр

let myResponse = new Response(body, init)
  1. body
    • Blob
    • BufferSource
    • FormData
    • URLSearchParams
    • USVString
  2. init
    • status
    • statusText
    • headers

ResponseДостигнутоbodyинтерфейс, поэтому при создании экземпляраResponse, вы можете позвонитьBody.blob(),body.formData(),body.json(),body.text()Сериализация возвращаемого значения, возвращаемое значение представляет собойPromise.具体实现方法如下所示：

  var blobReader = new Response(blob).json()
  blobReader.then(res => {
      console.log(res)
  })

резюме

С помощью метода анализа возвращаемого значения сервера, когда мы загружаем файл, мы можем больше судить о возвращаемом значении сервера.content-type, если возвращаемое значение неblob, мы можем выполнить некоторую индивидуальную обработку.

использованная литература

Категории