Разработка больших двоичных объектов в веб-API

внешний интерфейс API браузер Ресурсы изображений

В общей веб-разработке BLOB-объекты используются редко, но в некоторых сценариях BLOB-объекты могут удовлетворить особые потребности. Blob, сокращение от Binary Large Object, представляет большой объект двоичного типа. Концепция Blob используется в некоторых базах данных, например, тип BLOB в MYSQL представляет собой контейнер для двоичных данных. В Интернете объекты типа Blob представляют собой неизменяемые необработанные данные, подобные файловым объектам. С точки зрения непрофессионала, объекты Blob представляют собой двоичные данные, но они представляют собой двоичные данные, аналогичные файловым объектам, поэтому с объектами Blob можно манипулировать так же, как с объектами File. , File наследуется от Blob.

Основное использование Blob

Создайте

Объекты Blob можно создавать с помощью конструктора Blob:

Blob(blobParts[, options])

Описание параметра:

blobParts: тип массива, каждый элемент массива связан для формирования данных объекта Blob, каждый элемент массива может бытьArrayBuffer, ArrayBufferView, Blob, DOMString.

параметры: необязательный, тип формата словаря, вы можете указать следующие два свойства:

  • тип, значение по умолчанию"", который представляет тип MIME содержимого массива, которое будет помещено в большой двоичный объект.
  • окончания, значение по умолчанию — «прозрачный», используется для указания включения концов строк\nкак пишется строка. Это одно из двух значений: "native", что означает, что разделители строк заменяются на символы новой строки, соответствующие файловой системе операционной системы хоста; "transparent", что означает, что разделители, сохраненные в большом двоичном объекте, остаются неизменными.

Например:

    var data1 = "a";
    var data2 = "b";
    var data3 = "<div style='color:red;'>This is a blob</div>";
    var data4 = { "name": "abc" };

    var blob1 = new Blob([data1]);
    var blob2 = new Blob([data1, data2]);
    var blob3 = new Blob([data3]);
    var blob4 = new Blob([JSON.stringify(data4)]);
    var blob5 = new Blob([data4]);
    var blob6 = new Blob([data3, data4]);

    console.log(blob1);  //输出：Blob {size: 1, type: ""}
    console.log(blob2);  //输出：Blob {size: 2, type: ""}
    console.log(blob3);  //输出：Blob {size: 44, type: ""}
    console.log(blob4);  //输出：Blob {size: 14, type: ""}
    console.log(blob5);  //输出：Blob {size: 15, type: ""}
    console.log(blob6);  //输出：Blob {size: 59, type: ""}

размер представляетBlobКоличество байтов данных, содержащихся в объекте. Здесь следует отметить разницу между использованием строк и обычных объектов для создания больших двоичных объектов, blob4 используетсяJSON.stringifyПреобразуйте объект data4 в строку json, и blob5 будет создан непосредственно с использованием данных 4. Размеры двух объектов — 14 и 15 соответственно. Легко понять, что размер blob4 равен 14, потому что результат JSON.stringify(data4):"{"name":"abc"}", Ровно 14 байт (не считая крайних кавычек). blob5 размер равен 15, как рассчитать? Фактически, когда вы создаете объект Blob с помощью обычных объектов, это эквивалентно вызову метода toString обычных объектов () для получения строковых данных, а затем созданию объекта Blob. Итак, сохраненные данные blob5"[object Object]", 15 байт (не считая крайних кавычек).

метод среза

Объекты BLOB-объектов имеют метод slice, который возвращает новыйBlobобъект, содержащий источникBlobДанные в указанном диапазоне в объекте.

slice([start[, end[, contentType]]])

Описание параметра:

start: необязательный, представляетBlobнижний индекс, указывающий, что первый будет скопирован в новыйBlobНачальная позиция байта. Если передано отрицательное число, смещение будет рассчитываться от конца данных назад к началу.

конец: необязательный, представляетBlobИндекс индекса, соответствующий этому индексу байт -1 будет скопирован в новыйBlobпоследний байт . Если вы передадите отрицательное число, смещение будет рассчитываться от конца данных назад к началу.

contentType: необязательный, дать новыйBlobНазначьте новый тип документа. Это установит его свойство типа в переданное значение. Его значение по умолчанию — пустая строка.

Например:

    var data = "abcdef";
    var blob1 = new Blob([data]);
    var blob2 = blob1.slice(0,3);
    
    console.log(blob1);  //输出：Blob {size: 6, type: ""}
    console.log(blob2);  //输出：Blob {size: 3, type: ""}

С помощью метода slice новый объект blob создается из blob1 с размером, равным 3.

Сценарии использования BLOB-объектов

Частичная загрузка

Как упоминалось ранее, File наследуется от Blob, поэтому мы можем вызвать метод slice для выполнения сегментированных длинных передач больших файлов. код показывает, как показано ниже:

function uploadFile(file) {
  var chunkSize = 1024 * 1024;   // 每片1M大小
  var totalSize = file.size;
  var chunkQuantity = Math.ceil(totalSize/chunkSize);  //分片总数
  var offset = 0;  // 偏移量
  
  var reader = new FileReader();
  reader.onload = function(e) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST","http://xxxx/upload?fileName="+file.name);
    xhr.overrideMimeType("application/octet-stream");
    
    xhr.onreadystatechange = function() {
      if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        ++offset;
        if(offset === chunkQuantity) {
          alert("上传完成");
        } else if(offset === chunkQuantity-1){
          blob = file.slice(offset*chunkSize, totalSize);   // 上传最后一片
          reader.readAsBinaryString(blob);
        } else {
          blob = file.slice(offset*chunkSize, (offset+1)*chunkSize); 
          reader.readAsBinaryString(blob);
        }
      }else {
        alert("上传出错");
      }
    }
    
    if(xhr.sendAsBinary) {
      xhr.sendAsBinary(e.target.result);   // e.target.result是此次读取的分片二进制数据
    } else {
      xhr.send(e.target.result);
    }
  }
   var blob = file.slice(0, chunkSize);
   reader.readAsBinaryString(blob);
}

Этот код может быть дополнительно обогащен, например, отображением текущего хода загрузки, использованием нескольких объектов XMLHttpRequest для параллельной загрузки объектов (параметры местоположения фрагментированных данных должны быть переданы на сервер) и т. д.

Blob URL

URL-адрес большого двоичного объекта — это URL-адрес протокола большого двоичного объекта, и его формат выглядит следующим образом:

blob:http://XXX

Доступ к URL-адресам BLOB-объектов можно получить черезURL.createObjectURL(blob)Создайте. В большинстве сценариев мы можем использовать URL-адреса BLOB-объектов точно так же, как URL-адреса, использующие протокол Http. Общие сценарии: как адрес загрузки файла и как адрес ресурса изображения.

  • Адрес загрузки файла
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Blob Test</title>
    <script>
        function createDownloadFile() {
            var content = "Blob Data";
            var blob = new Blob([content]);
            var link = document.getElementsByTagName("a")[0];
            link.download = "file";
            link.href = URL.createObjectURL(blob);
        }
        window.onload = createDownloadFile;
    </script>
</head>

<body>
    <a>下载</a>
</body>

</html>

Нажмите кнопку загрузки, браузер загрузит файл с именем file, содержимое файла: Blob Data. С помощью объекта Blob мы можем динамически генерировать файлы во внешнем коде и предоставлять их браузеру для загрузки. Откройте окно отладки браузера Chrome и на вкладке «Элементы» вы увидите, что сгенерированный URL-адрес большого двоичного объекта:

  • Адрес ресурса изображения

Создайте URL-адрес BLOB-объекта для файла изображения и назначьте егоЭтикетка:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Blob Test</title>
    <script>
        function handleFile(e) {
            var file = e.files[0];
            var blob = URL.createObjectURL(file);
            var img = document.getElementsByTagName("img")[0];
            img.src = blob;
            img.onload = function(e) {
                URL.revokeObjectURL(this.src);  // 释放createObjectURL创建的对象##
            }
        }
    </script>
</head>

<body>
    <input type="file" accept="image/*" onchange="handleFile(this)" />
    <br/>
    <img style="width:200px;height:200px">
</body>

</html>

Изображение, выбранное на входе, будет отображаться вотображается, как показано на рисунке:

В то же время вы можете найти информацию о запросе этого URL-адреса блоба на вкладке «Сеть»:

Эта информация запроса почти точно такая же, как URL-адрес Http, который мы обычно используем для получения изображений. Мы также можем загружать ресурсы изображения, используя URL-адрес данных:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Blob Test</title>
    <script>
        function handleFile(e) {
            var file = e.files[0];
            var fileReader = new FileReader();
            var img = document.getElementsByTagName("img")[0];
            fileReader.onload = function(e) {
                img.src = e.target.result;
            }
            fileReader.readAsDataURL(file);
        }
    </script>
</head>

<body>
    <input type="file" accept="image/*" onchange="handleFile(this)" />
    <br/>
    <img style="width:200px;height:200px">
</body>

</html>

FileReaderreadAsDataURLСоздайте URL-адрес данных, как показано ниже:

URL-адрес данных не должен быть незнаком всем.Существует мера оптимизации веб-производительности: для непосредственного встраивания небольших изображений в файлы HTML с кодировкой base64 фактически используется URL-адрес данных для получения данных встроенного изображения.

Итак, в чем разница между URL-адресом BLOB-объекта и URL-адресом данных?

  1. Длина URL-адреса BLOB-объекта обычно короткая, но URL-адрес данных часто бывает очень длинным, поскольку он напрямую хранит данные изображения в кодировке base64.Как показано на рисунке выше, браузер использует многоточие (…) при отображении данных. URL. При явно больших изображениях используйте URL-адрес BLOB-объекта для лучших возможностей.
  2. URL-адрес BLOB-объекта может легко использовать XMLHttpRequest для получения исходных данных, например:
var blobUrl = URL.createObjectURL(new Blob(['Test'], {type: 'text/plain'}));
var x = new XMLHttpRequest();
// 如果设置x.responseType = 'blob'，将返回一个Blob对象，而不是文本:
// x.responseType = 'blob';
x.onload = function() {
    alert(x.responseText);   // 输出 Test
};
x.open('get', blobUrl);
x.send();

Для URL-адресов данных не все браузеры поддерживают получение исходных данных через XMLHttpRequest. 3.URL-адреса BLOB-объектов можно использовать только внутри текущего приложения., скопируйте URL-адрес BLOB-объекта в адресную строку браузера, вы не сможете получить данные. Напротив, URL-адрес данных очень портативный, и вы можете использовать его в любом браузере.

В дополнение к сетевому адресу, который можно использовать в качестве ресурса изображения, URL-адрес BLOB-объекта также можно использовать в качестве сетевого адреса других ресурсов, таких как файлы html, файлы json и т. д. Чтобы гарантировать, что браузер может правильно анализировать тип файла, возвращаемый URL-адресом Blob, необходимо создать объект Blob. При указании соответствующего типа:

// 创建HTML文件的Blob URL
var data = "<div style='color:red;'>This is a blob</div>";
var blob = new Blob([data], { type: 'text/html' });
var blobURL = URL.createObjectURL(blob);

// 创建JSON文件的Blob URL
var data = { "name": "abc" };
var blob = new Blob([JSON.stringify(data)], { type: 'application/json' });
var blobURL = URL.createObjectURL(blob);

Добро пожаловать, чтобы обратить внимание на мою официальную учетную запись: большой фронт-энд ветеранских кадров и получить 21 избранную книгу большого фронт-энда!

Категории