Mediasisällön lataaminen ja hakeminen
Harjoittele kuvien, videoiden ja muiden mediatiedostojen lataamista sekä niiden hakemista sovelluksessasi näytettäviksi.
Mediasisällön lataaminen ja hakeminen on ilmainen Supabase backend palveluna-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Supabase backend palveluna-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Supabase backend palveluna-kurssilla on yhteensä 4 oppituntia.
Media dynaamisille sovelluksille
Käyttäjäavatarit, tuotekuvat ja videot tekevät sovelluksista monipuolisia ja kiinnostavia. Tiedostojen tehokkaan hallinnan oppiminen on ratkaisevan tärkeää modernissa sovelluskehityksessä.
Tässä oppitunnissa keskitymme Supabase Storage -asiakasohjelman käyttämiseen erilaisten mediatyyppien lataamiseen ja niiden hakemiseen näyttämistä varten.
Supabase Storage -asiakasohjelma
supabase.storage-asiakasohjelma on väylänne tiedostotallennuksen käsittelyyn. Sen avulla voitte esimerkiksi ladata, ladata laitteelle ja hallita tiedostoja Supabase-bucketeissanne.
Yleensä alustatte Supabase-asiakasohjelman kerran sovelluksessanne.
Tiedostojen valmistelu lataamista varten
Ennen tiedoston lataamista tarvitsette sen datan. Verkkosovelluksissa data saadaan usein HTML-elementistä <input type="file">, joka antaa käyttöön File- tai Blob-objektin.
Esimerkeissämme simuloimme Blob-objektia tiedostodatan edustajana, jotta koodi voidaan suorittaa.
Ensimmäisen tiedoston lataaminen
Lähettäkää tiedosto tiettyyn bucket-polkuun upload()-metodilla. Teidän on määritettävä bucketin nimi, haluttu tiedostopolku (tiedostonimi mukaan lukien) sekä tiedoston data.
Suorittakaa tämä esimerkki nähdäksenne simuloidun tiedoston lataamisen:
// Assume 'createClient' is imported from '@supabase/supabase-js'
// Assume 'SUPABASE_URL' and 'SUPABASE_ANON_KEY' are configured
const createClient = (url, key) => ({
storage: {
from: (bucketName) => ({
upload: async (filePath, fileData, options) => {
console.log(`[MOCK] Uploading to bucket '${bucketName}', path '${filePath}'`);
console.log(`[MOCK] File data type: ${fileData.type}, size: ${fileData.size}`);
console.log(`[MOCK] Options: ${JSON.stringify(options)}`);
return { data: { path: filePath, id: 'mock-id' }, error: null };
}
})
}
});
const SUPABASE_URL = 'https://your-project.supabase.co'; // Replace with your URL
const SUPABASE_ANON_KEY = 'YOUR_ANON_KEY'; // Replace with your Anon Key
const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
async function uploadExample() {
const fileData = new Blob(['Hello CoddyKit!'], { type: 'text/plain' });
const fileName = 'lesson-note.txt';
const filePath = `public/${fileName}`; // Store in a 'public' folder
try {
const { data, error } = await supabase
.storage
.from('my-bucket') // Use your actual bucket name
.upload(filePath, fileData, {
cacheControl: '3600', // Cache for 1 hour
upsert: false // Do not overwrite if file exists
});
if (error) {
throw error;
}
console.log('Upload successful:', data);
} catch (error) {
console.error('Error uploading file:', error.message);
}
}
uploadExample();Latausvalintojen ymmärtäminen
upload()-metodi hyväksyy options-olion, jonka avulla latausprosessia voi hienosäätää:
cacheControl: AsettaaCache-Control-otsakkeen, joka kertoo selaimille, kuinka kauan tiedosto säilytetään välimuistissa.upsert: Totuusarvo. Jos arvo ontrue, määritetyssä polussa oleva tiedosto korvataan. Jos arvo onfalse(oletus), toiminto aiheuttaa virheen, jos tiedosto on jo olemassa.contentType: Tiedoston MIME-tyyppi (esimerkiksi'image/jpeg'). Tyyppi päätellään usein automaattisesti, mutta se kannattaa määrittää tarkasti.
Julkisten URL-osoitteiden hakeminen
Jos tiedostot tallennetaan julkisen käytön salliviin bucketeihin (Storage-käytäntöjen kautta määritettynä), voitte hakea suoran, julkisesti käytettävissä olevan URL-osoitteen. Tätä URL-osoitetta voi käyttää <img>- ja <video>-tageissa tai suoran latauslinkin osoitteena.
getPublicUrl()-metodi palauttaa tämän linkin.
// Assume 'createClient' is imported and configured
const createClient = (url, key) => ({
storage: {
from: (bucketName) => ({
getPublicUrl: (filePath) => {
console.log(`[MOCK] Getting public URL for bucket '${bucketName}', path '${filePath}'`);
return { data: { publicUrl: `https://mock.supabase.co/storage/v1/object/public/${bucketName}/${filePath}` } };
}
})
}
});
const SUPABASE_URL = 'https://your-project.supabase.co';
const SUPABASE_ANON_KEY = 'YOUR_ANON_KEY';
const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
function getPublicUrlExample() {
const filePath = 'public/lesson-note.txt'; // Path of your uploaded file
const { data } = supabase
.storage
.from('my-bucket') // Use your actual bucket name
.getPublicUrl(filePath);
console.log('Public URL:', data.publicUrl);
}
getPublicUrlExample();Median näyttäminen sovelluksessa
Kun olette saaneet julkisen URL-osoitteen getPublicUrl()-metodilla, median näyttäminen sovelluksessanne on helppoa. Käyttäkää URL-osoitetta vain sopivan HTML-elementin src-attribuutissa.
- Kuvat:
<img src="YOUR_PUBLIC_URL" alt="description"> - Videot:
<video src="YOUR_PUBLIC_URL" controls></video> - Ääni:
<audio src="YOUR_PUBLIC_URL" controls></audio>
Yksityisen median turvallinen käyttö
Kaikkien tiedostojen ei pidä olla julkisesti käytettävissä. RLS-käytännöillä suojattuihin yksityisiin tiedostoihin, kuten käyttäjäasiakirjoihin ja arkaluonteiseen mediaan, ei voi käyttää yksinkertaista julkista URL-osoitetta.
Supabase tarjoaa näille yksityisille tiedostoille turvalliseen ja väliaikaiseen käyttöön allekirjoitettuja URL-osoitteita. Näissä URL-osoitteissa on väliaikainen tunniste, joka vanhenee määritetyn ajan kuluttua.
Allekirjoitettujen URL-osoitteiden luominen
createSignedUrl()-metodi luo väliaikaisen URL-osoitteen yksityiselle tiedostolle. Määritätte tiedostopolun ja ajan (sekunteina), jonka URL-osoite on voimassa.
Tämä sopii erinomaisesti tilanteisiin, joissa haluatte antaa todennetuille käyttäjille väliaikaisen pääsyn yksityiseen sisältöön tekemättä siitä maailmanlaajuisesti julkista.
// Assume 'createClient' is imported and configured
const createClient = (url, key) => ({
storage: {
from: (bucketName) => ({
createSignedUrl: async (filePath, expiresIn) => {
console.log(`[MOCK] Creating signed URL for bucket '${bucketName}', path '${filePath}', expires in ${expiresIn}s`);
return { data: { signedUrl: `https://mock.supabase.co/storage/v1/object/sign/${bucketName}/${filePath}?token=mock-token&expires=${expiresIn}` }, error: null };
}
})
}
});
const SUPABASE_URL = 'https://your-project.supabase.co';
const SUPABASE_ANON_KEY = 'YOUR_ANON_KEY';
const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
async function getSignedUrlExample() {
const privateFilePath = 'private/user-report.pdf'; // Path to a private file
const expiresInSeconds = 60; // URL valid for 60 seconds
try {
const { data, error } = await supabase
.storage
.from('my-private-bucket') // Use your actual private bucket name
.createSignedUrl(privateFilePath, expiresInSeconds);
if (error) {
throw error;
}
console.log('Signed URL:', data.signedUrl);
console.log(`This URL will expire in ${expiresInSeconds} seconds.`);
} catch (error) {
console.error('Error creating signed URL:', error.message);
}
}
getSignedUrlExample();Lataamisen ja hakemisen pikakertaus
Testataan ymmärrystänne median lataamisesta ja hakemisesta Supabase Storagen avulla.
Medianhallinta hallussa
Olette oppineet onnistuneesti:
- Lataamaan tiedostoja Supabase Storage -bucketeihin
upload()-metodilla. - Hakemaan julkisia URL-osoitteita välitöntä näyttämistä varten
getPublicUrl()-metodilla. - Luomaan turvallisia, aikarajoitettuja allekirjoitettuja URL-osoitteita yksityiselle sisällölle
createSignedUrl()-metodilla.
Nämä taidot ovat olennaisia monipuolisten ja dynaamisten sovellusten rakentamisessa, kun sovellus käsittelee käyttäjien luomaa sisältöä tai hallinnoituja mediaresursseja turvallisesti ja tehokkaasti.
Opi Supabase backend palveluna tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 11
- Oppitunnit
- 40
Usein kysytyt kysymykset
Onko oppitunti ”Mediasisällön lataaminen ja hakeminen” ilmainen?
Kyllä – oppitunnin ”Mediasisällön lataaminen ja hakeminen” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Supabase backend palveluna-kurssin, päivitä CoddyKit PROhon. Supabase backend palveluna-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Mediasisällön lataaminen ja hakeminen”?
Harjoittele kuvien, videoiden ja muiden mediatiedostojen lataamista sekä niiden hakemista sovelluksessasi näytettäviksi. Harjoittelet Supabase backend palveluna-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Supabase backend palveluna-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Supabase backend palveluna-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Mediasisällön lataaminen ja hakeminen”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Supabase backend palveluna-oppitunnilla?
Kyllä. Jokainen Supabase backend palveluna-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Tiedostojen tallentaminen Supabase-säilöihin
- Käytön hallinta käytännöillä
- Mediasisällön lataaminen ja hakeminen
- Kuvamuunnokset ja allekirjoitetut URL-osoitteet