Wie lade ich ein Bild hoch, das einen Anforderungsheader im Wangeneditor erfordert?

Wenn Sie Bilder mithilfe von WangEditor Rich Texteditor hochladen, muss das Bild mit der URL das Bild direkt mit der URL einfügen. In diesem Artikel wird Sie über die Lösung dieses Problems geleitet.

Problem: Wenn viele Entwickler Wangeneditor verwenden, stellen sie fest, dass die Verwendung einer Methode wie process.env.VUE_APP_BASE_API '/file/dwn2?fileName=' result[0] ist ungültig, die Schnittstellenadresse zu spleißen, um das Bild einzulegen, da für die Schnittstelle ein bestimmter Anforderungs -Header erforderlich ist. Der Versuch, das Bild lokal herunterzuladen und dann den Blob zu erhalten, kann das Problem nicht lösen.

Grundursache: Das Standard -Bild -Upload -Mechanismus von Wangeditor kann keine Schnittstellen verarbeiten, für die Anforderungsheader erforderlich ist. Einfaches URL -Spleißen kann die erforderlichen Anforderungs -Header -Informationen nicht übergeben.

Lösung: Sie müssen die Bild -Upload -Funktion von Wangeneditor anpassen, den Anforderungsheader in der benutzerdefinierten Funktion manuell verarbeiten und die erhaltenen Bilddaten an Wangeneditor übergeben.

Spezifische Schritte:

1. Überprüfen Sie das Dokument für Wangeneditor: Lesen Sie das Kapitel zum benutzerdefinierten Bild -Upload im offiziellen Wangeneditor -Dokument sorgfältig durch. In diesem Abschnitt der Dokumentation wird beschrieben, wie Sie Upload -Funktionen anpassen.

2. Benutzerdefinierte Upload -Funktion: Verwenden Sie Tools wie fetch oder axios um eine benutzerdefinierte Image -Upload -Funktion zu schreiben. In dieser Funktion:

   • Senden Sie eine Anfrage mit dem erforderlichen Anforderungsheader an Ihre Bilddownload -Oberfläche.
   • Verarbeitet die von der Schnittstelle zurückgegebenen Bilddaten und konvertiert sie in ein für Wangeneditor akzeptabler Format wie Base64 -Codierung oder Blob.
   • Verwenden Sie die von WangeDitor bereitgestellte API, um Bilddaten in den Editor einzufügen.

Beispielcode (mit fetch ): (Bitte passen Sie ihn gemäß Ihrer tatsächlichen Schnittstelle an und anfordern Sie Header)

 // benutzerdefinierte Upload -Funktion const pectuload = async (result) => {
  const url = process.env.vue_app_base_api '/file/dwn2? Dateiname =' Ergebnis [0];
  const headers = {
    // Fügen Sie Ihre Anfrage -Header "Autorisierung" hinzu: "Bearer Your_Token",
    // ... andere Header
  };

  versuchen {
    const response = warte fetch (url, {header});
    if (! response.ok) {
      Neuen Fehler werfen (`HTTP -Fehler! Status: $ {response.status}`);
    }
    const blob = wartete auf response.blob ();
    const reader = new fileReader ();
    reader.onload = (e) => {
      // Blob auf Base64 konvertieren
      const base64 = e.target.Result;
      // Verwenden Sie die API von Wangeneditor, um Bilder einzufinden (siehe das Dokument für bestimmte Methoden im WangeneTor -Dokument).
      editor.cmd.inserthtml (` <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="Wie lade ich ein Bild hoch, das einen Anforderungsheader im Wangeneditor erfordert?"> `);
    };
    Reader.ReadasDataurl (Blob);
  } catch (error) {
    console.Error ('Bild -Upload fehlgeschlagen:', Fehler);
    // Upload -Fehler}}}
};

// Konfigurieren Sie die benutzerdefinierte Upload -Funktion im Wangeneditor
editor.customconfig.UploadimgServer = pectuload;
editor.create ();

Mit einer benutzerdefinierten Upload -Funktion haben Sie die vollständige Kontrolle über den Bild -Upload -Prozess, um sicherzustellen, dass der Anforderungsheader korrekt übergeben wird, wodurch das Bild erfolgreich in Wangeneditor eingefügt wird. Denken Sie daran, den Platzhalter im Beispielcode als tatsächlichen Wert zu ersetzen. Weitere Informationen zu seiner API finden Sie in der offiziellen Dokumentation von Wangeditor.

Das obige ist der detaillierte Inhalt vonWie lade ich ein Bild hoch, das einen Anforderungsheader im Wangeneditor erfordert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!