Explication détaillée du composant de téléchargement de vue Alibaba Cloud

Cet article explique principalement comment utiliser la transmission directe sur le Web pour télécharger des images Alibaba Cloud OSS dans le projet Vue. Par défaut, les lecteurs ont une certaine compréhension du framework Vue et d'Alibaba Cloud OSS. Le processus global consiste à charger Alibaba Cloud. SDK -> Initialiser le client de téléchargement -> Attendre la sélection du fichier -> Sélection du fichier à télécharger -> Distribuer les résultats du téléchargement

J'ai rencontré les pièges suivants lors de l'utilisation :

1. Cet article Le SDK Alibaba Cloud sous la forme js est utilisé. L'utilisation de la forme npm du SDK nécessitera certaines fonctions de nœud back-end et ne peut pas être utilisée pour la transmission Web directe.

Vous pouvez ajouter la balise script directement dans le html

<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.3.0.min.js"></script>

Dans le composant, j'ai packagé une méthode asynchrone pour obtenir le sdk, LoadJS. Si vous êtes intéressé, vous pouvez prendre. un coup d'oeil

2 . Il y a un problème asynchrone lors de l'utilisation du SDK sous la forme d'une introduction js, c'est-à-dire que le SDK peut ne pas être chargé lorsque le client est initialisé. Vue et initialisez le client après le chargement du SDK

let timer = setInterval(() => {
  if (window.OSS) {
    this.init()
    clearInterval(timer)
    timer = null
    this.debug && window.console.log('阿里云oss初始化完成')
  } else {
    this.debug && window.console.log('阿里云oss初始化中...')
  }
}, 500)

3. Si votre projet est dans un environnement https, vous devez vous assurer que secure est configuré comme true lors de l'initialisation du client, sinon le fichier ne pourra pas le faire. être téléchargé

4. Par défaut, enregistrer Le nom de l'image sera une chaîne aléatoire, mais si la même image est téléchargée plusieurs fois, plusieurs images identiques seront enregistrées ici, en épissant la taille, hauteur et largeur de l'image dans une chaîne, puis ceci. La chaîne est hachée md5, de sorte qu'une seule image sera enregistrée après l'avoir téléchargée plusieurs fois

Recommandations associées :

Une brève discussion sur la conception de l'architecture de base du composant de téléchargement

Tutoriel PHP du composant de téléchargement multi-fichiers php

Comment utiliser JS télécharger le composant FileUpload compétences template_javascript personnalisées

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!