How to upload an image that requires a request header in WangEditor?

When uploading images using WangEditor rich text editor, if your image download interface needs to carry request headers, inserting the image directly using the URL will fail. This article will guide you on how to solve this problem.

Problem: When many developers use WangEditor, they find that using a method like process.env.VUE_APP_BASE_API '/file/dwn2?fileName=' result[0] it is invalid to splice the interface address to insert the image, because the interface requires a specific request header. Trying to download the image locally and then obtain the blob cannot solve the problem.

Root cause: WangEditor's default image upload mechanism cannot handle interfaces that require request headers. Simple URL splicing cannot pass the necessary request header information.

Solution: You need to customize the image upload function of WangEditor, manually process the request header in the custom function, and pass the obtained image data to WangEditor.

Specific steps:

1. Check the WangEditor document: carefully read the chapter on custom image upload in the official WangEditor document. This section of the documentation details how to customize upload functions.

2. Custom upload function: Use tools such as fetch or axios to write a custom image upload function. In this function:

   • Send a request containing the required request header to your image download interface.
   • Processes the image data returned by the interface and converts it to a format acceptable to WangEditor, such as Base64 encoding or Blob.
   • Use the API provided by WangEditor to insert image data into the editor.

Sample code (using fetch ): (Please adjust it according to your actual interface and request header)

 // Custom upload function const customUpload = async (result) => {
  const url = process.env.VUE_APP_BASE_API '/file/dwn2?fileName=' result[0];
  const headers = {
    // Add your request header 'Authorization': 'Bearer your_token',
    // ... other headers
  };

  try {
    const response = await fetch(url, { headers });
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const blob = await response.blob();
    const reader = new FileReader();
    reader.onload = (e) => {
      // Convert Blob to Base64
      const base64 = e.target.result;
      // Use the WangEditor API to insert images (see the WangEditor document for specific methods)
      editor.cmd.insertHTML(` <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="How to upload an image that requires a request header in WangEditor?"> `);
    };
    reader.readAsDataURL(blob);
  } catch (error) {
    console.error('Image upload failed:', error);
    // Handle upload error}
};

// Configure the custom upload function to WangEditor
editor.customConfig.uploadImgServer = customUpload;
editor.create();

With a custom upload function, you have complete control over the image upload process, ensuring that the request header is passed correctly, thus successfully inserting the image in WangEditor. Remember to replace the placeholder in the sample code as your actual value. Please refer to WangEditor's official documentation for more detailed information about its API.

The above is the detailed content of How to upload an image that requires a request header in WangEditor?. For more information, please follow other related articles on the PHP Chinese website!