JavaScript Academy · Lektion

Blob-objekt och Object-URL:er

Skapa och använd blob-URL:er för nedladdningar.

Lektion 3 av 413 steg

Blob-objekt och Object-URL:er är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad är en Blob?

En Blob (Binary Large Object) representerar oföränderlig rådata, till exempel filinnehåll, i minnet. Filer är en särskild typ av Blob med ett namn och ett ändringsdatum.

Med Blobs kan ni skapa, dela upp och ladda ned binärdata i webbläsaren.

Skapa en Blob

Skapa en Blob från en array med delar (strängar, buffertar eller andra Blobs) och ett options-objekt som anger MIME-typen type.

const blob = new Blob(['Hello, world!'], { type: 'text/plain' });

console.log(blob.size);
console.log(blob.type);

Blob från flera delar

Delarna i arrayen sammanfogas i den angivna ordningen. Ni kan blanda strängar och typade arrayer.

const blob = new Blob(['line 1\n', 'line 2\n', 'line 3'], {
  type: 'text/plain'
});

console.log(blob.size + ' bytes');

Läsa en Blob

Blobs tillhandahåller Promise-baserade metoderna text(), arrayBuffer() och stream() för att läsa innehållet.

async function show() {
  const blob = new Blob(['stored data'], { type: 'text/plain' });
  const text = await blob.text();
  console.log(text);
}

show();

Dela upp en Blob

blob.slice(start, end) returnerar en ny Blob som täcker en del av originalet utan att hela objektet kopieras. Det är användbart för uppladdningar i delar.

const blob = new Blob(['ABCDEFGHIJ'], { type: 'text/plain' });
const chunk = blob.slice(0, 5);

console.log(chunk.size);

Skapa en objekt-URL

URL.createObjectURL(blob) returnerar en kortlivad URL som pekar på den Blob som finns i minnet. Ni kan använda den som img.src, som en länks href eller som videokälla.

const blob = new Blob(['data'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

console.log(url.startsWith('blob:'));

Förhandsvisa en uppladdad bild

Omvandla en vald fil till en objekt-URL och tilldela den till ett bildelement för en omedelbar förhandsvisning, utan att behöva kontakta servern.

const file = document.querySelector('#picker').files[0];
const url = URL.createObjectURL(file);
const img = document.querySelector('#preview');
img.src = url;

console.log('preview ready');

Utlösa en nedladdning

Skapa en Blob, skapa en objekt-URL och klicka på ett tillfälligt ankare med attributet download för att spara en genererad fil.

function download(text, filename) {
  const blob = new Blob([text], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

download('report data', 'report.txt');

Återkalla objekt-URL:er

Objekt-URL:er behåller Blob-objektet i minnet tills ni anropar URL.revokeObjectURL(url). Återkalla dem alltid när ni är klara för att undvika minnesläckor.

const blob = new Blob(['temp'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

console.log('using ' + url);
URL.revokeObjectURL(url);
console.log('revoked');

Blobs och JSON

Ni kan skapa en nedladdningsbar JSON-fil genom att serialisera data till en Blob med rätt MIME-typ.

const data = { name: 'Ada', score: 99 };
const blob = new Blob([JSON.stringify(data, null, 2)], {
  type: 'application/json'
});

console.log(blob.type);
console.log(blob.size + ' bytes');

Varför Blobs är viktiga

Blobs och objekt-URL:er låter er hantera binärdata helt på klientsidan: förhandsvisa uppladdningar, generera nedladdningar och dela upp stora filer. Kom ihåg att återkalla URL:er när ni är klara. Sedan kommer ni att skicka filer till en server med fetch.

const blob = new Blob(['export'], { type: 'text/csv' });
const url = URL.createObjectURL(blob);
console.log('csv url created:', url.startsWith('blob:'));
URL.revokeObjectURL(url);

Snabb kontroll

Vad ska ni anropa för att frigöra minne efter att ni har använt en objekt-URL för en nedladdning?

Besvara frågan i den interaktiva lektionen

Sammanfattning: Blobs och objekt-URL:er

Ni har lärt er att hantera binärdata:

new Blob(parts, { type }) skapar oföränderlig binärdata.
Läs med text() och arrayBuffer(); dela upp med slice().
URL.createObjectURL skapar en användbar blob:-URL för förhandsvisningar och nedladdningar.
Anropa alltid URL.revokeObjectURL när ni är klara för att frigöra minne.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 59
Lektioner: 200

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Blob-objekt och Object-URL:er” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Blob-objekt och Object-URL:er”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Blob-objekt och Object-URL:er”?

Skapa och använd blob-URL:er för nedladdningar. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Blob-objekt och Object-URL:er”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till JavaScript Academy