Comment utiliser React et AWS S3 pour implémenter le stockage et la gestion des ressources statiques frontales

Comment utiliser React et AWS S3 pour implémenter le stockage et la gestion front-end des ressources statiques

Présentation :
Lors du développement d'applications Web modernes, nous devons souvent traiter et gérer un grand nombre de ressources statiques, telles que des images, audio, vidéos et autres fichiers. AWS S3 (abréviation : Amazon Simple Storage Service) est une solution de stockage cloud qui peut être utilisée pour stocker et distribuer des ressources statiques.

React est une bibliothèque JavaScript frontale populaire pour créer des interfaces utilisateur. Il fournit un moyen flexible, efficace et réutilisable de créer des composants d'interface utilisateur interactifs.

Dans cet article, nous explorerons comment réaliser le stockage et la gestion des ressources statiques frontales en combinant React et AWS S3. Nous expliquerons comment configurer un compartiment AWS S3 et utiliser React pour charger, télécharger et supprimer des fichiers.

Étape 1 : Configurer le compartiment AWS S3
Tout d'abord, nous devons créer un compte AWS, puis nous connecter à la console de gestion AWS. Dans la console, nous créons un nouveau bucket S3.

Ouvrez le service S3 et cliquez sur le bouton "Créer un bucket".

Dans la page de création de compartiment, remplissez le nom, sélectionnez l'emplacement géographique approprié et configurez-le selon les paramètres par défaut.

Dans les paramètres d'autorisation d'accès, nous pouvons choisir de définir des autorisations d'accès public pour le bucket ou de personnaliser les autorisations d'accès.

Après avoir terminé les paramètres, cliquez sur le bouton « Créer un compartiment » pour créer avec succès un nouveau compartiment S3.

Étape 2 : Initialisation de l'application React
Dans le projet React, nous devons d'abord installer le SDK AWS afin d'interagir avec le service S3. Vous pouvez utiliser la commande suivante pour installer le SDK AWS dans votre projet :

npm install aws-sdk

Étape 3 : Implémenter la fonction de téléchargement de fichiers
Pour implémenter la fonction de téléchargement de fichiers, nous devons créer un formulaire de téléchargement dans l'application React et sélectionnez le fichier lorsque l'utilisateur. Ensuite, téléchargez le fichier dans le compartiment S3.

Tout d'abord, nous devons importer le SDK AWS et configurer la configuration AWS afin de pouvoir communiquer avec le service S3.

importer AWS depuis 'aws-sdk';

// Définir la configuration AWS
AWS.config.update({
accessKeyId: 'your-access-key',
secretAccessKey: 'your-secret-access-key'
});

Ensuite, nous devons écrire une fonction pour télécharger des fichiers.

const uploadFile = async (file) => {
// Créer une instance S3
const s3 = new AWS.S3();

// Définir les paramètres de téléchargement
const params = {

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

};

essayez {

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

} catch (error) {

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

}
}

Dans le composant React, nous pouvons créer un formulaire de sélection de fichier et appeler la fonction uploadFile après que l'utilisateur a sélectionné le fichier.

class UploadForm étend React.Component {
handleFileChange = (event) => Implémenter la fonction de téléchargement de fichiers.

Étape 4 : Implémenter la fonction de téléchargement de fichier

Pour implémenter la fonction de téléchargement de fichier, nous devons créer un lien de téléchargement Une fois que l'utilisateur a cliqué sur le lien, le fichier peut être téléchargé localement.

Tout d'abord, nous devons écrire une fonction pour obtenir l'URL du fichier.

const getFileUrl = (fileName) => {

// Créer une instance S3

const s3 = new AWS.S3();

// Définir l'obtention des paramètres d'URL
const params = {

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

};

/ / Générer une URL
const url = s3.getSignedUrl('getObject', params);
return url;

}

Dans le composant React, nous pouvons créer un lien de téléchargement et appeler la fonction getFileUrl après que l'utilisateur a cliqué sur le lien.

class DownloadLink étend React.Component {

handleDownload = () => Fonction de téléchargement de fichiers.

Étape 5 : Implémenter la fonction de suppression de fichiers
Pour implémenter la fonction de suppression de fichiers, nous devons écrire une fonction pour supprimer des fichiers.

const deleteFile = async (fileName) => {

// Créer une instance S3

const s3 = new AWS.S3();

// Définir les paramètres de suppression

const params = {

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

};

essayer {

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

} catch (error) {

const fileName = 'your-file-name';
const url = getFileUrl(fileName);
window.open(url, '_blank');

}

}

Dans le composant React, nous pouvons créer un bouton de suppression et appeler la fonction deleteFile après que l'utilisateur a cliqué sur le bouton.

class DeleteButton extends React.Component {
handleDelete = () => {

return (
  <div>
    <button onClick={this.handleDownload}>下载文件</button>
  </div>
);

}

render() {

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

}

}

Enfin, nous pouvons utiliser le composant DeleteButton dans les applications React pour réaliser un fichier fonction de suppression.

Résumé :

En combinant React et AWS S3, nous pouvons facilement implémenter les fonctions de stockage et de gestion des ressources statiques frontales. En téléchargeant des fichiers, en téléchargeant des fichiers et en supprimant des fichiers, nous pouvons gérer efficacement les ressources statiques dans les applications Web.

Veuillez noter que l'exemple de code fourni dans cet article est uniquement à des fins de démonstration. En pratique, vous devrez peut-être l’adapter et l’étendre à vos besoins spécifiques.

J'espère que cet article pourra vous aider à mieux utiliser React et AWS S3 pour stocker et gérer les ressources statiques frontales. Je vous souhaite une bonne utilisation !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!