Wangeditor에서 요청 헤더가 필요한 이미지를 업로드하는 방법은 무엇입니까?

Wangeditor Rich Text 편집기를 사용하여 이미지를 업로드 할 때 이미지 다운로드 인터페이스가 요청 헤더를 전달 해야하는 경우 URL을 사용하여 직접 이미지를 삽입하면 실패합니다. 이 기사는이 문제를 해결하는 방법에 대해 안내합니다.

문제 : 많은 개발자가 Wangeditor를 사용하는 경우 process.env.VUE_APP_BASE_API '/file/dwn2?fileName=' result[0] 메소드를 사용하여 인터페이스에 특정 요청 헤더가 필요하기 때문에 인터페이스 주소를 스플릿으로 연결하는 것이 유효하지 않다는 것을 알게됩니다. 이미지를 로컬로 다운로드 한 다음 블로브를 얻으려고하면 문제가 해결 될 수 없습니다.

근본 원인 : Wangeditor의 기본 이미지 업로드 메커니즘은 요청 헤더가 필요한 인터페이스를 처리 할 수 ​​없습니다. 간단한 URL 스 플라이 싱은 필요한 요청 헤더 정보를 전달할 수 없습니다.

솔루션 : Wangeditor의 이미지 업로드 기능을 사용자 정의하고 사용자 정의 기능에서 요청 헤더를 수동으로 처리 한 다음 얻은 이미지 데이터를 Wangeditor로 전달해야합니다.

특정 단계 :

1. Wangeditor 문서 확인 : 공식 Wangeditor 문서의 사용자 정의 이미지 업로드에 대한 장을주의 깊게 읽으십시오. 이 문서 섹션에는 업로드 기능을 사용자 정의하는 방법에 대해 자세히 설명합니다.

2. 사용자 정의 업로드 기능 : fetch 또는 axios 와 같은 도구를 사용하여 사용자 정의 이미지 업로드 기능을 작성하십시오. 이 기능에서 :

   • 필요한 요청 헤더가 포함 된 요청을 이미지 다운로드 인터페이스로 보냅니다.
   • 인터페이스에 의해 반환 된 이미지 데이터를 처리하고 Base64 인코딩 또는 블로브와 같은 Wangeditor에 허용되는 형식으로 변환합니다.
   • Wangeditor에서 제공 한 API를 사용하여 이미지 데이터를 편집기에 삽입하십시오.

샘플 코드 ( fetch 사용) : (실제 인터페이스에 따라 조정하고 요청 헤더에 따라 조정하십시오)

 // 사용자 정의 업로드 함수 const customUpload = async (결과) => {
  const url = process.env.vue_app_base_api '/file/dwn2? filename ='result [0];
  const 헤더 = {
    // 요청 헤더 추가 '권한 부여': 'Bearer Your_token',
    // ... 다른 헤더
  };

  노력하다 {
    const response = await fetch (url, {headers});
    if (! response.ok) {
      새 오류를 던지십시오 (`http error! status : $ {response.status}`);
    }
    const blob = await response.blob ();
    const reader = new Filereader ();
    reader.onload = (e) => {
      // Blob을 Base64로 변환합니다
      const base64 = e.target.result;
      // WANGEDITOR API를 사용하여 이미지를 삽입합니다 (특정 방법은 Wangeditor 문서 참조)
      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="Wangeditor에서 요청 헤더가 필요한 이미지를 업로드하는 방법은 무엇입니까?"> `);
    };
    reader.readasdataurl (blob);
  } catch (오류) {
    console.error ( '이미지 업로드 실패 :', 오류);
    // 업로드 핸들 오류}
};

// WANGEDITOR에 사용자 정의 업로드 함수를 구성합니다
editor.customconfig.uploadimgserver = customUpload;
editor.create ();

사용자 정의 업로드 기능을 사용하면 이미지 업로드 프로세스를 완전히 제어하여 요청 헤더가 올바르게 전달되도록하여 Wangeditor에 이미지를 성공적으로 삽입하십시오. 샘플 코드의 자리 표시자를 실제 값으로 바꾸는 것을 잊지 마십시오. API에 대한 자세한 정보는 Wangeditor의 공식 문서를 참조하십시오.

위 내용은 Wangeditor에서 요청 헤더가 필요한 이미지를 업로드하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!