VUE + UEditor에서 단일 이미지 크로스 도메인 업로드 기능을 구현하는 방법

이 글은 주로 VUE + UEditor 단일 이미지 크로스 도메인 업로드 기능의 구현 방법을 소개합니다. 필요한 친구들은 참고하시면 됩니다.

UEditor 공식 홈페이지에서는 단일 이미지의 크로스 도메인 업로드를 제공하지 않는다고 나와 있으니, 그냥 스스로 해결해 보세요. 인터넷에서 많은 솔루션을 확인했지만 vue와 함께 사용되는 솔루션은 없었지만 몇 가지 아이디어를 얻었습니다. 너무 많은 소스 코드를 변경하고 싶지 않다는 기준으로 시도했는데... 우연히 해결책이 나왔습니다: 전단지를 업로드할 때 백엔드가 JSON을 직접 반환하지 않고 프런트엔드 페이지

프런트엔드로 리디렉션됩니다. VUE

백엔드: WAMP + ThinkPHP5.0

Frontend

http://localhost:8888

1. 공식 웹사이트로 이동하여 UEditor를 vue에 다운로드하고 ueditor.config.js를 열어 서버 경로를 구성합니다. 로컬 도메인 이름에 추가된 호스트 파일로 이동할 수 있습니다. 다음은 내 구성입니다.

2 ueditor.all.js를 열고 끝에

3. 페이지 만들기에는 JSON 데이터가 표시됩니다. 라우팅 매개변수를 직접 사용해 반환된 결과를 받은 뒤 합쳐봤습니다. JSON 전체를 수신할 수 없어, JSON을 모두 표시하지 못하고 상태와 URL만 얻어내야 했습니다. 인터페이스에 접속하지 않고 백엔드 데이터를 수신하는 방법을 아직 모르겠습니다. 좋은 해결책이 있으면 제안해 주세요.

Backend

http://localhost.server.com

1. PHP 버전의 UEditor를 다운로드하고 내부 PHP 폴더에 있는 파일을 프로젝트에 복사한 후 컨트롤러에서 출력 결과를 확인하세요. , 단일 사진은 결과를 직접 반환하지 않습니다

2. Config.json에서 액세스 경로를 수정하고 경로를 저장합니다

기본적으로 완료되었습니다. 단일 사진의 효과를 살펴보세요

위 내용은 제가 모두를 위해 정리한 내용이니, 앞으로도 많은 분들께 도움이 되었으면 좋겠습니다.

관련 기사:

vue.js에서 vue-fontawesome 사용 정보

JS를 사용하여 노드에 새 요소 추가

JS를 사용하여 노드 요소를 가져오는 방법

위 내용은 VUE + UEditor에서 단일 이미지 크로스 도메인 업로드 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!