Utilisez JS plupload pour télécharger directement des images par lots vers les compétences Youpai Cloud_javascript

Les forums ou les barres de publication doivent souvent partager beaucoup d'images. La pire façon de télécharger des images est de les télécharger sur un serveur central, puis celui-ci les transmet au serveur d'images statiques. Cet article explique comment utiliser plupload pour optimiser le processus de téléchargement et télécharger directement des images par lots sur Youpai Cloud, en contournant le serveur. Cet article se concentrera sur les points clés suivants :

Copier le code Le code est le suivant :

bibliothèque plupload
Compression locale des images
Sélection multiple d'images
Contournez le serveur et téléchargez directement des photos par lots sur Youpai Cloud
Utilisez l'API HTTP FORM de Youpai
configuration du téléchargement

bibliothèque plupload

plupload est un plug-in de téléchargement d'images très riche. Les téléchargements par lots peuvent être pris en charge via Flash/Silverligh/html4 pour les navigateurs de version inférieure, tandis que pour les navigateurs de version supérieure, l'interface HTML5 sera utilisée en premier pour le téléchargement. Toutes ces déterminations sont automatiques, et on peut dire qu'elle est très pratique à utiliser. ! Deuxièmement, plupload prend également en charge des fonctions telles que la compression des images sur le client et le glisser-déposer directement pour le téléchargement. Pour plus d'informations, vous pouvez vous rendre sur son site officiel.

Ici, nous utilisons uniquement son API de base et n'avons besoin que d'introduire un fichier.

Copier le code Le code est le suivant :

L'exemple officiel de l'API principale est très simple, vous pouvez directement vous rendre sur http://www.plupload.com/examples/core pour le voir. Il n'y a aucune difficulté à comprendre l'API de base. Si vous avez besoin d'aide, vous pouvez me poser des questions plus loin dans cet article.

Compression locale des images

En général, la qualité des images visionnées sur le Web n'est pas élevée. Je me souviens que lorsque j'apprenais le PS au lycée, le professeur m'a dit que la résolution des images en ligne devrait être réglée sur 72, et pour les images imprimées, elle devrait être réglée sur 72. être réglé sur 300. Par conséquent, lorsqu'un utilisateur télécharge une grande photo, une meilleure approche consiste pour le client de l'utilisateur à compresser l'image localement et à télécharger l'image compressée plus petite, ce qui n'affecte pas l'effet de navigation et peut également accélérer la vitesse de téléchargement, réduisant ainsi la charge. sur le serveur.

La fonction de compression locale des images est prise en charge dans plupload. Il suffit de passer un paramètre de redimensionnement lors de son initialisation. Parmi eux, la largeur et la hauteur peuvent être définies en fonction de la situation réelle, et la qualité est un paramètre plus important, comme son nom l'indique, plus la valeur définie est petite, plus l'image sera petite, mais la qualité d'affichage sera pire. . Vous devez peser cela vous-même.

Copier le code Le code est le suivant :

{
"redimensionner": {
"largeur": 200,
"hauteur": 200,
"qualité": 70
>
>

Sélection multiple d'images

Une condition préalable au téléchargement d'images par lots est la possibilité de sélectionner plusieurs images. Les fichiers à sélection multiple sont une fonctionnalité standard de HTML5. Nous pouvons activer le mode multi-sélection des manières suivantes :

.

Copier le code Le code est le suivant :

Sélectionnez des images :

Selon la section Sélection de fichiers multiples dans le navigateur prenant en charge un très excellent plug-in jquery jQuery-File-Upload, IE vient tout juste de commencer à prendre en charge cette fonctionnalité HTML5 jusqu'à IE10, nous devons donc utiliser Flash Le pouvoir magique pour prendre en charge la sélection de plusieurs images dans les navigateurs de version inférieure. Heureusement, plupload l'a déjà fait pour nous, et ce commutateur est activé par défaut. Si vous estimez que vous n'avez pas besoin d'utiliser des images à sélection multiple, vous pouvez définir multi_selection: false pour désactiver cette fonctionnalité.

Contournez le serveur et téléchargez directement des photos par lots sur Youpai Cloud

Youpaiyun fournit l'API HTTP FORM. Grâce à cette interface, nous pouvons directement lancer une demande de téléchargement d'images depuis le navigateur sans avoir à passer par notre propre serveur, ce qui réduit considérablement les frais généraux.

Utilisez l'API HTTP FORM de Youpai

Pour utiliser cette interface, vous devez envoyer un formulaire à Youpaiyun. Ce formulaire contient les fichiers que vous souhaitez télécharger et doit également inclure la politique et la signature. La stratégie est utilisée pour définir les paramètres liés à la demande de téléchargement, tels que le chemin de stockage, le type de fichier, les résultats du prétraitement, etc. En outre, elle inclut également le temps d'octroi de la demande de téléchargement, etc. La signature est utilisée pour la vérification de sécurité.

Pour faciliter la démonstration, javascript est utilisé directement pour générer la politique et la signature. Mais en utilisation réelle, pour des raisons de sécurité, veuillez effectuer cette procédure côté serveur. Le code suivant a été légèrement modifié sur la base de la démo officielle, en utilisant principalement le compte de test officiel. Pour la méthode de génération spécifique de ces deux paramètres, veuillez vous référer à la documentation officielle : http://docs.upyun com/. api/form_api/.

Copier le code Le code est le suivant :

options var = {
'seau' : 'démonstration',
'save-key' : '/test/filename.txt',
'expiration' : Math.floor(new Date().getTime() / 1000) 86400
};
// Afficher plus de paramètres : http://docs.upyun.com/api/form_api/Introduction à l'interface #Form API
var politique = window.btoa(JSON.stringify(options));
// Obtenez l'API du formulaire à partir de l'arrière-plan de gestion des utilisateurs UPYUN
var form_api_secret = '1 JY2ZqD5UVfw6hQ8EesYQO50Wo=';
// Calculer la signature
var signature = md5(politique '&' form_api_secret);

configuration du téléchargement

Comment faire fonctionner plupload avec l'API HTTP FORM de Youpaiyun me donne vraiment mal à la tête. En regardant la documentation de plupload, j'ai découvert par hasard que le lien vers Upload to Amazon S3 m'avait attiré. Le nom complet d'Amazon S3 est Amazon Simple Storage Service. Le service de stockage cloud qu'il fournit est plus ou moins similaire à Youpaiyun.

Donc, sur la base de l'introduction de la configuration côté navigateur dans cet article, j'ai compris la configuration nécessaire pour télécharger sur Youpaiyun. En fait, c'est très simple à dire, l'essentiel est de configurer les deux paramètres url et multipart_params. Dans l'exemple suivant, options.bucket, Policy et Signature utilisent directement les valeurs calculées dans la section précédente.

Copier le code Le code est le suivant :

var uploader = nouveau plupload.Uploader({
...
URL : 'http://v0.api.upyun.com/' options.bucket,
Multipart_params : {
          'Filename' : '${filename}', // ajout de ceci pour maintenir la cohérence à travers les environnements d'exécution
         'Type de contenu' : '',
        'politique' : politique,
        'signature' : signature,
},
...
});

Résumé

De cette façon, j'ai finalement réussi à contourner le serveur via plupload et à télécharger des images par lots sur Youpai Cloud. plupload est vraiment une bibliothèque très puissante, mais elle nécessite des frais pour une utilisation commerciale. Veuillez vous rendre sur son site officiel pour en savoir plus !

N'est-ce pas très simple ? La raison principale est que l'idée est très bonne et mérite d'être apprise. Si vous avez des questions, laissez-moi un message et nous pourrons progresser ensemble