---
title: Blob
slug: Web/API/Blob
translation_of: Web/API/Blob
---
<p>{{ APIRef("File API") }}</p>

<h2 id="Sumário">Sumário</h2>

<p>Um objeto <code>Blob</code> representa um objeto do tipo arquivo, com  dados brutos imutáveis. Blobs representam dados que não estão necessariamente em um formato JavaScript nativo. A interface {{ domxref("File") }} é baseada no <code>Blob</code>, herdando funcionalidade blob e expandindo-o para suportar arquivos no sistema do usuário.</p>

<p>Para construir um <code>Blob</code> a partir de outro objeto ou dado não-blob , utilize o construtor {{domxref("Blob.Blob","Blob()")}}. Para criar um blob que contém um subconjunto de dados de outro blob, use o método {{domxref("Blob.slice()", "slice()")}}. Para obter um objeto Blob de um arquivo no sistema de arquivos do usuário, veja a documentação {{domxref("File")}}.</p>

<p>The APIs accepting <code>Blob</code> objects are also listed on the {{domxref("File")}} documentation.</p>

<div class="note">
<p><strong>Nota:</strong> O método <code>slice()</code> usava inicialmente <code>length</code> como segundo argumento para indicar o numero de bytes a copiar no novo <code>Blob</code>.  Se você especificou valores de maneira que <code>start + length</code> excederam o tamanho do <code>Blob</code> de origem, o <code>Blob</code> retornado contém dados a partir do início do índice até o final do <code>Blob</code> de origem.</p>
</div>

<div class="note"><strong>Nota:</strong>  Esteja ciente que o método <code>slice()</code> possui prefixos de fornecedores em alguns navegadores e versões: <code>blob.mozSlice()</code> para Firefox 12 e anteriores, e <code>blob.webkitSlice()</code> para Safari. Uma versão antiga do método <code>slice()</code>, sem prefixos de fornecedor, tem semântica diferente, e portanto é obsoleta. O suporta para <code>blob.mozSlice()</code> foi descontinuado a partir do Firefox 30.</div>

<h2 id="Construtor">Construtor</h2>

<dl>
 <dt>{{domxref("Blob.Blob", "Blob(blobParts[, opções])")}}</dt>
 <dd>Retorna um novo <code>Blob</code> object cujo conteúdo consiste na concatenação do array de valores passados por parâmentro.</dd>
</dl>

<h2 id="Propriedades">Propriedades</h2>

<dl>
 <dt>{{domxref("Blob.size")}} {{readonlyinline}}</dt>
 <dd>Tamanho em bytes dos dados contidos no objeto <code>Blob</code>.</dd>
 <dt>{{domxref("Blob.type")}} {{readonlyinline}}</dt>
 <dd>Uma string que indica o MIME type dos dados no <code>Blob</code>. Se o tipo é desconhecido, então retorna uma string vazia.</dd>
</dl>

<h2 id="Métodos">Métodos</h2>

<dl>
 <dt>{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt>
 <dd>Retorna um novo  <code>Blob</code> object contendo dados em no intervalo de bytes especificado do <code>Blob</code> de origem.</dd>
</dl>

<h2 id="Exemplos">Exemplos</h2>

<h3 id="Exemplos_de_uso_do_construtor_Blob">Exemplos de uso do construtor Blob</h3>

<p>O código a seguir:</p>

<pre class="brush: js">var aFileParts = ['&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;'];
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // o blob
</pre>

<p>equivale a:</p>

<pre class="brush: js">var oBuilder = new BlobBuilder();
var aFileParts = ['&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;'];
oBuilder.append(aFileParts[0]);
var oMyBlob = oBuilder.getBlob('text/xml'); // o blob
</pre>

<div class="warning">
<p>O {{ domxref("BlobBuilder") }} oferece outra maneira para criar Blobs, mas é depreciado e não deveria mais ser usado.</p>
</div>

<h3 id="Exemplo_para_criar_uma_URL_para_uma_array_tipada_usando_blob">Exemplo para criar uma URL para uma array tipada usando blob</h3>

<p>O código a seguir:</p>

<pre class="brush: js">var typedArray = GetTheTypedArraySomehow();
var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // passe um MIME-type útil aqui
var url = URL.createObjectURL(blob);
// url será algo do tipo: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
// agora você pode usar a URL em qualquer contexto em que URLs regulares podem ser usadas, por exemplo: img.src, etc.
</pre>

<h3 id="Exemplo_de_Extração_de_Dados_de_Um_Blob">Exemplo de Extração de Dados de Um Blob</h3>

<p>O único jeito de ler o conteúdo de um Blob é usando {{domxref("FileReader")}}. O código a seguir lê o conteudo de um Blob como um Array.</p>

<pre class="brush: js">var reader = new FileReader();
reader.addEventListener("loadend", function() {
   // reader.result contém o conteúdo do blob como uma array tipada
});
reader.readAsArrayBuffer(blob);</pre>

<p>Ao usar outros métodos de {{domxref("FileReader")}}, é possível ler o conteúdo de um Blob como uma string ou como uma data URL.</p>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">Especificações</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificações</th>
   <th scope="col">Status</th>
   <th scope="col">Comentário</th>
  </tr>
  <tr>
   <td>{{SpecName('File API','#blob','Blob')}}</td>
   <td>{{Spec2('File API')}}</td>
   <td>Definição inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

<p>{{Compat("api.Blob")}}</p>

<h3 id="Notas_para_Gecko">Notas para Gecko</h3>

<p>Anterior ao Gecko 12.0 {{ geckoRelease("12.0") }}, havia um bug que afetava o comportamento do {{ manch("slice") }}; que não funcionava para as posições <code>start</code> e <code>end</code> fora do intervalo de valores assinados como 64-bit; este bug foi corrigido para dar suporte a valores assinados como 64-bit.</p>

<h2 id="Chrome_Code_-_Disponibilidade_de_Escopo">Chrome Code - Disponibilidade de Escopo</h2>

<p>No escopo JSM, <code>Blob</code> é disponivel sem a necessidade de nada especial.</p>

<p>No escopo Bootstrap, ele deve ser importado como tal:</p>

<pre class="brush: js">const {Blob, Services} = Cu.import('resource://gre/modules/Services.jsm', {});</pre>

<h2 id="Veja_Também">Veja Também</h2>

<ul>
 <li>{{ domxref("BlobBuilder") }}</li>
 <li>{{ domxref("File") }}</li>
</ul>