URL.createObjectURL / revokeObjectURL în JavaScript

const adresa = URL.createObjectURL(blob);
URL.revokeObjectURL(adresa)

Ce face URL.createObjectURL / revokeObjectURL

URL.createObjectURL(blob) returnează o adresă de forma blob:https://site.ro/… care indică direct spre datele din memorie. O poți pune în src-ul unei imagini (previzualizarea unei poze alese de utilizator) sau în href-ul unui link de descărcare.

Adresa ține datele în memorie până la închiderea paginii. Când nu mai ai nevoie de ea, eliberează memoria cu URL.revokeObjectURL(adresa).

Parametri

Parametru	Descriere
blob	Un Blob sau File (în browser, și MediaSource).

Ce returnează

createObjectURL: adresa, ca text. revokeObjectURL: undefined.

Exemple

Exemplul 1: Descărcarea unui fișier CSV generat în pagină

const csv = "nume,oras\nAna,Iași\nDan,Cluj";
const blob = new Blob([csv], { type: "text/csv" });
const adresa = URL.createObjectURL(blob);

const link = document.createElement("a");
link.href = adresa;
link.download = "clienti.csv";
link.click();

console.log(adresa);
URL.revokeObjectURL(adresa);

Rezultat în browser

blob:https://www.exemplu.ro/6f1c2a9e-3b7d-4e1a-9c55-0d8e7a2f41b3

Exemplul 2: Previzualizarea unei poze alese

document.querySelector("#poza").addEventListener("change", (e) => {
  const fisier = e.target.files[0];
  const img = document.querySelector("#previzualizare");
  img.src = URL.createObjectURL(fisier);
  img.onload = () => URL.revokeObjectURL(img.src);
});

Greșeli frecvente

• Creezi adrese noi pentru fiecare previzualizare și nu le eliberezi. Memoria paginii crește continuu.

Comenzi înrudite

• Blob / File: Un bloc de date imuabil, cu tip MIME (Blob), sau un fișier cu nume și dată (File).
• FileReader: Citește conținutul unui fișier ales de utilizator: ca text, ca adresă data: sau ca octeți.
• new URL(): Desface o adresă URL în părți (domeniu, cale, parametri) și o construiește corect la loc.