Comment télécharger une image qui nécessite un en-tête de demande dans WangeDitor?

Lors du téléchargement d'images à l'aide de l'éditeur de texte riche Wangeditor, si l'interface de téléchargement de votre image doit transporter des en-têtes de demande, l'insertion de l'image directement à l'aide de l'URL échouera. Cet article vous guidera sur la façon de résoudre ce problème.

Problème: Lorsque de nombreux développeurs utilisent WangeDitor, ils constatent qu'à l'aide d'une méthode comme process.env.VUE_APP_BASE_API '/file/dwn2?fileName=' result[0] il n'est pas valide d'épisser l'adresse d'interface pour insérer l'image, car l'interface nécessite un en-tête de demande spécifique. Essayer de télécharger l'image localement, puis d'obtenir le blob ne peut pas résoudre le problème.

Cause profonde: le mécanisme de téléchargement d'image par défaut de Wangeditor ne peut pas gérer les interfaces qui nécessitent des en-têtes de demande. L'épissage simple d'URL ne peut pas transmettre les informations d'en-tête de demande nécessaire.

Solution: vous devez personnaliser la fonction de téléchargement d'image de WangeDitor, traiter manuellement l'en-tête de demande dans la fonction personnalisée et passer les données d'image obtenues à Wangeditor.

Étapes spécifiques:

1. Vérifiez le document WangeDitor: Lisez soigneusement le chapitre sur le téléchargement d'image personnalisé dans le document officiel de WangeDitor. Cette section de la documentation détaille comment personnaliser les fonctions de téléchargement.

2. Fonction de téléchargement personnalisée: utilisez des outils tels que fetch ou axios pour écrire une fonction de téléchargement d'image personnalisée. Dans cette fonction:

   • Envoyez une demande contenant l'en-tête de demande requise à votre interface de téléchargement d'image.
   • Traite les données d'image renvoyées par l'interface et la convertit en un format acceptable pour WangeDitor, comme le codage de base64 ou le blob.
   • Utilisez l'API fournie par WangeDitor pour insérer des données d'image dans l'éditeur.

Exemple de code (en utilisant fetch ): (veuillez les ajuster en fonction de votre interface réelle et demandez en en-tête)

 // Fonction de téléchargement personnalisé const CustomUpload = async (result) => {
  const url = process.env.vue_app_base_api '/ file / dwn2? filename =' result [0];
  Const-têtes = {
    // Ajoutez votre en-tête de demande «Autorisation»: «Bearer Your_Token»,
    // ... autres en-têtes
  };

  essayer {
    const Response = attendre fetch (url, {headers});
    if (! Response.ok) {
      lancer une nouvelle erreur (`Http Error! Status: $ {réponse.status}`);
    }
    const blob = attendre réponse.blob ();
    const Reader = new FileReader ();
    reader.onload = (e) => {
      // Convertir Blob en base64
      const base64 = e.target.result;
      // Utilisez l'API Wangeditor pour insérer des images (voir le document WangeDitor pour des méthodes spécifiques)
      editor.cmd.inserthtml (` <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Comment télécharger une image qui nécessite un en-tête de demande dans WangeDitor?"> `);
    };
    Reader.readasdataurl (blob);
  } catch (erreur) {
    Console.Error ('Image Téléchargement a échoué:', erreur);
    // Gérer l'erreur de téléchargement}
};

// Configurez la fonction de téléchargement personnalisée sur Wangeditor
editor.CustomConfig.uploadImgServer = CustomUpload;
editor.create ();

Avec une fonction de téléchargement personnalisée, vous avez un contrôle complet sur le processus de téléchargement d'image, en vous assurant que l'en-tête de demande est passé correctement, insérant ainsi avec succès l'image dans Wangeditor. N'oubliez pas de remplacer l'espace réservé dans l'exemple de code comme valeur réelle. Veuillez vous référer à la documentation officielle de Wangeditor pour des informations plus détaillées sur son API.

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!