0Pricing
JavaScript Academy · Lekcja

Bloby i adresy URL obiektów

Proszę tworzyć i używać adresów URL blobów do pobierania plików.

Bloby i adresy URL obiektów to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Czym jest Blob

Blob (Binary Large Object) reprezentuje niezmienne surowe dane, takie jak zawartość pliku, przechowywane w pamięci. Pliki są szczególnym rodzajem obiektów Blob, które mają nazwę i datę modyfikacji.

Obiekty Blob umożliwiają tworzenie, wycinanie i pobieranie danych binarnych w przeglądarce.

Tworzenie obiektu Blob

Obiekt Blob należy utworzyć z tablicy części (ciągów znaków, buforów lub innych obiektów Blob) oraz obiektu opcji określającego typ MIME type.

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

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

Blob z wielu części

Elementy tablicy części są łączone w podanej kolejności. Można łączyć ciągi znaków z tablicami typowanymi.

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

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

Ponowny odczyt obiektu Blob

Obiekty Blob udostępniają oparte na Promise metody text(), arrayBuffer() i stream() do odczytywania ich zawartości.

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

show();

Wycinanie fragmentu obiektu Blob

blob.slice(start, end) zwraca nowy obiekt Blob obejmujący część oryginalnego obiektu, bez kopiowania całości. Jest to przydatne przy przesyłaniu plików w częściach.

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

console.log(chunk.size);

Tworzenie adresu URL obiektu

URL.createObjectURL(blob) zwraca krótkotrwały adres URL wskazujący obiekt Blob znajdujący się w pamięci. Można go użyć jako img.src, atrybutu href łącza lub źródła wideo.

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

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

Wyświetlanie podglądu przesłanego obrazu

Wybrany plik należy przekształcić w adres URL obiektu i przypisać go do elementu obrazu, aby natychmiast wyświetlić podgląd bez konieczności wysyłania żądania do serwera.

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

console.log('preview ready');

Uruchamianie pobierania

Należy utworzyć obiekt Blob, utworzyć adres URL obiektu, a następnie kliknąć tymczasowy element kotwicy z atrybutem download, aby zapisać wygenerowany plik.

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');

Zwalnianie adresów URL obiektów

Adresy URL obiektów przechowują obiekt Blob w pamięci do momentu wywołania URL.revokeObjectURL(url). Po zakończeniu pracy zawsze należy je zwalniać, aby uniknąć wycieków pamięci.

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

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

Obiekty Blob i JSON

Można utworzyć plik JSON do pobrania, serializując dane do obiektu Blob z właściwym typem MIME.

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');

Dlaczego obiekty Blob są ważne

Obiekty Blob i adresy URL obiektów umożliwiają obsługę danych binarnych w całości po stronie klienta: wyświetlanie podglądu przesyłanych plików, generowanie plików do pobrania i dzielenie dużych plików na części. Należy pamiętać o zwalnianiu adresów URL po zakończeniu pracy. Następnie wyślemy pliki na serwer za pomocą 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);

Szybkie sprawdzenie

Co należy wywołać po użyciu adresu URL obiektu do pobrania pliku, aby zwolnić pamięć?

Podsumowanie: obiekty Blob i adresy URL obiektów

Dowiedzieli się Państwo, jak obsługiwać dane binarne:

  • new Blob(parts, { type }) tworzy niezmienne dane binarne.
  • Dane można odczytywać za pomocą text() i arrayBuffer(), a dzielić za pomocą slice().
  • URL.createObjectURL tworzy użyteczny adres URL blob: do podglądu i pobierania.
  • Po zakończeniu pracy zawsze należy wywołać URL.revokeObjectURL, aby zwolnić pamięć.

Często zadawane pytania

Czy lekcja „Bloby i adresy URL obiektów” jest bezpłatna?

Tak — pełny tekst „Bloby i adresy URL obiektów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Bloby i adresy URL obiektów”?

Proszę tworzyć i używać adresów URL blobów do pobierania plików. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Bloby i adresy URL obiektów”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Obiekt FormData
  2. Odczytywanie plików za pomocą FileReader
  3. Bloby i adresy URL obiektów
  4. Przesyłanie plików za pomocą Fetch
← Powrót do JavaScript Academy