Bagaimana untuk memuat naik imej yang memerlukan tajuk permintaan di WangEditor?

Apabila memuat naik imej menggunakan editor teks kaya WangEditor, jika antara muka muat turun imej anda perlu membawa tajuk permintaan, memasukkan imej secara langsung menggunakan URL akan gagal. Artikel ini akan membimbing anda bagaimana menyelesaikan masalah ini.

Masalah: Apabila ramai pemaju menggunakan WangEditor, mereka mendapati bahawa menggunakan kaedah seperti process.env.VUE_APP_BASE_API '/file/dwn2?fileName=' result[0] tidak sah untuk menyambungkan alamat antara muka untuk memasukkan imej, kerana antara muka memerlukan header permintaan tertentu. Cuba memuat turun imej secara tempatan dan kemudian dapatkan gumpalan tidak dapat menyelesaikan masalah.

Punca Root: Mekanisme muat naik imej lalai WangEditor tidak dapat mengendalikan antara muka yang memerlukan tajuk permintaan. Splicing URL mudah tidak dapat lulus maklumat header permintaan yang diperlukan.

Penyelesaian: Anda perlu menyesuaikan fungsi muat naik imej WangEditor, secara manual memproses tajuk permintaan dalam fungsi tersuai, dan lulus data imej yang diperoleh kepada WangEditor.

Langkah khusus:

1. Semak dokumen WangEditor: Berhati -hati membaca bab mengenai muat naik imej tersuai dalam dokumen WangEditor rasmi. Bahagian dokumentasi ini memperincikan cara menyesuaikan fungsi memuat naik.

2. Fungsi muat naik tersuai: Gunakan alat seperti fetch atau axios untuk menulis fungsi muat naik imej tersuai. Dalam fungsi ini:

   • Hantar permintaan yang mengandungi header permintaan yang diperlukan ke antara muka muat turun imej anda.
   • Memproses data imej yang dikembalikan oleh antara muka dan menukarnya ke format yang boleh diterima oleh WangEditor, seperti pengekodan atau gumpalan Base64.
   • Gunakan API yang disediakan oleh WangEditor untuk memasukkan data imej ke dalam editor.

Contoh Kod (Menggunakan fetch ): (Sila sesuaikannya mengikut header antara muka dan permintaan sebenar anda)

 // fungsi muat naik tersuai const customupload = async (result) => {
  const url = process.env.vue_app_base_api '/file/dwn2? filename =' result [0];
  headers const = {
    // Tambahkan pengepala permintaan anda 'kebenaran': 'pembawa anda_token',
    // ... tajuk lain
  };

  Cuba {
    response const = menunggu ambil (url, {headers});
    jika (! response.ok) {
      membuang ralat baru (`HTTP Ralat! Status: $ {response.status}`);
    }
    const blob = menunggu tindak balas.blob ();
    const reader = fileReader baru ();
    reader.onload = (e) => {
      // Tukar gumpalan ke base64
      const base64 = e.target.result;
      // Gunakan API WangEditor untuk memasukkan imej (lihat dokumen WangEditor untuk kaedah tertentu)
      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="Bagaimana untuk memuat naik imej yang memerlukan tajuk permintaan di WangEditor?"> `);
    };
    Reader.ReadAsDataurl (blob);
  } menangkap (ralat) {
    console.error ('muat naik imej gagal:', ralat);
    // mengendalikan ralat muat naik}
};

// Konfigurasikan fungsi muat naik tersuai kepada WangEditor
editor.customconfig.uploadimgserver = customupload;
editor.create ();

Dengan fungsi muat naik tersuai, anda mempunyai kawalan sepenuhnya ke atas proses muat naik imej, memastikan tajuk permintaan diluluskan dengan betul, dengan itu berjaya memasukkan imej dalam WangEditor. Ingatlah untuk menggantikan pemegang tempat dalam kod sampel sebagai nilai sebenar anda. Sila rujuk dokumentasi rasmi WangEditor untuk maklumat yang lebih terperinci mengenai APInya.

Atas ialah kandungan terperinci Bagaimana untuk memuat naik imej yang memerlukan tajuk permintaan di WangEditor?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!