Cara menggunakan React dan AWS S3 untuk melaksanakan storan dan pengurusan sumber statik bahagian hadapan

Cara menggunakan React dan AWS S3 untuk melaksanakan storan dan pengurusan sumber statik bahagian hadapan

Ikhtisar:
Apabila membangunkan aplikasi web moden, kita sering perlu memproses dan mengurus sejumlah besar sumber statik, seperti gambar, audio, video dan fail lain . AWS S3 (singkatan: Amazon Simple Storage Service) ialah penyelesaian storan awan yang boleh digunakan untuk menyimpan dan mengedarkan sumber statik.

React ialah perpustakaan JavaScript bahagian hadapan yang popular untuk membina antara muka pengguna. Ia menyediakan cara yang fleksibel, cekap dan boleh digunakan semula untuk mencipta komponen UI interaktif.

Dalam artikel ini, kami akan meneroka cara untuk mencapai penyimpanan dan pengurusan sumber statik bahagian hadapan dengan menggabungkan React dan AWS S3. Kami akan membincangkan cara menyediakan baldi AWS S3 dan menggunakan React untuk memuat naik, memuat turun dan memadam fail.

Langkah 1: Sediakan baldi AWS S3
Mula-mula, kita perlu menyediakan akaun AWS dan kemudian log masuk ke konsol pengurusan AWS. Dalam konsol, kami mencipta baldi S3 baharu.

Buka perkhidmatan S3 dan klik butang "Buat Baldi".

Dalam halaman buat baldi, isikan nama, pilih lokasi geografi yang sesuai, dan konfigurasikannya mengikut tetapan lalai.

Dalam tetapan kebenaran akses, kami boleh memilih untuk menetapkan kebenaran akses awam untuk baldi, atau menyesuaikan kebenaran akses.

Selepas melengkapkan tetapan, klik butang "Buat Baldi" untuk berjaya mencipta baldi S3 baharu.

Langkah 2: Inisialisasi aplikasi React
Dalam projek React, kita perlu memasang AWS SDK terlebih dahulu untuk berinteraksi dengan perkhidmatan S3. Anda boleh menggunakan arahan berikut untuk memasang AWS SDK dalam projek anda:

npm install aws-sdk

Langkah 3: Laksanakan fungsi muat naik fail
Untuk melaksanakan fungsi muat naik fail, kami perlu mencipta borang muat naik dalam aplikasi React dan pilih fail apabila pengguna Selepas itu, muat naik fail ke baldi S3.

Pertama, kita perlu mengimport AWS SDK dan menyediakan konfigurasi AWS supaya kita boleh berkomunikasi dengan perkhidmatan S3.

import AWS daripada 'aws-sdk';

// Tetapkan konfigurasi AWS
AWS.config.update({
accessKeyId: 'your-access-key',
secretAccessKey: 'your-secret-access-key'
});

Seterusnya, kita perlu menulis fungsi untuk memuat naik fail.

const uploadFile = async (fail) => {
// Cipta contoh S3
const s3 = new AWS.S3();

// Tentukan parameter muat naik
const params = {

Bucket: 'your-bucket-name',
Key: file.name,
Body: file

}; {

// 执行上传操作
await s3.upload(params).promise();
console.log('文件上传成功！');

} catch (error) {

console.error('文件上传失败：', error);

}

}

Dalam komponen React, kita boleh mencipta borang pemilihan fail dan memanggil fungsi uploadFile selepas pengguna memilih fail.

class UploadForm memanjangkan React.Component {

handleFileChange = (event) => Laksanakan fungsi muat naik fail.

Langkah 4: Laksanakan fungsi muat turun fail

Untuk melaksanakan fungsi muat turun fail, kita perlu membina pautan muat turun Selepas pengguna mengklik pautan, fail boleh dimuat turun secara setempat.

Pertama, kita perlu menulis fungsi untuk mendapatkan URL fail.

const getFileUrl = (fileName) => {

// Cipta contoh S3
const s3 = new AWS.S3();

// Tentukan mendapatkan parameter URL

const params = {

const file = event.target.files[0];
uploadFile(file);

}; / Jana URL

const url = s3.getSignedUrl('getObject', params);

return url;

}

Dalam komponen React, kita boleh mencipta pautan muat turun dan memanggil fungsi getFileUrl selepas pengguna mengklik pautan.

class DownloadLink memanjangkan React.Component {

handleDownload = () => Fungsi muat turun fail.

Langkah 5: Laksanakan fungsi pemadaman fail

Untuk melaksanakan fungsi pemadaman fail, kita perlu menulis fungsi untuk memadam fail.

const deleteFile = async (fileName) => {
// Cipta contoh S3
const s3 = new AWS.S3();

// Tentukan parameter pemadaman

const params = {

};

{

return (
  <div>
    <input type="file" onChange={this.handleFileChange} />
  </div>
);

} tangkap (ralat) {

Bucket: 'your-bucket-name',
Key: fileName

}

}

Dalam komponen React, kita boleh mencipta butang padam dan memanggil fungsi deleteFile selepas pengguna mengklik butang.

kelas DeleteButton memanjangkan React.Component {

handleDelete = () => Fungsi pemadaman fail.

Ringkasan:

Dengan menggabungkan React dan AWS S3, kami boleh melaksanakan fungsi penyimpanan dan pengurusan sumber statik bahagian hadapan dengan mudah. Dengan memuat naik fail, memuat turun fail dan memadam fail, kami boleh mengurus sumber statik dalam aplikasi web dengan berkesan.

Sila ambil perhatian bahawa kod sampel yang disediakan dalam artikel ini adalah untuk tujuan demonstrasi sahaja. Dalam amalan, anda mungkin perlu menyesuaikan dan memanjangkannya kepada keperluan khusus anda.

Saya harap artikel ini dapat membantu anda menggunakan React dan AWS S3 dengan lebih baik untuk menyimpan dan mengurus sumber statik bahagian hadapan. Saya doakan anda selamat menggunakannya!

Atas ialah kandungan terperinci Cara menggunakan React dan AWS S3 untuk melaksanakan storan dan pengurusan sumber statik bahagian hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!