Qiniu Cloud에 업로드된 KindEditor 사진

제가 직접 웹사이트를 만들었습니다. 저는 주로 KindEditor에 포함된 사진을 업로드합니다. 그런데 서버가 가상 호스트를 사용하고 있어서 넣을 공간이 많지 않습니다. 무료사이트에 있는 사진.. 클라우드 저장공간에 관해서는 KindEditor와 Qiniu의 SDK 소스코드를 볼 때 헷갈려서 온라인으로 검색해봐도 비슷한 해결책이 없어서 소스코드를 계속 볼 수밖에 없었습니다. 밤새도록 작업한 후에 제가 하는 방법은 다음과 같습니다.

버전 참고:

KindEditor 버전: 4x

Qiniu SDK: 7.x.x

백엔드 스크립트: PHP

먼저 Qiniu에서 제공하는 양식 템플릿을 살펴보세요. 여기서 양식 항목 파일 2개와 토큰이 필요합니다.

1. KindEditor의 플러그인/image/image.js 파일 수정

20번째 줄 여기서 업로드한 파일의 이름 필드를 Qiniu, 즉 name="file"과 일치하도록 변경합니다. 주석 처리한 줄이 원본 코드입니다

두 번째 변경 사항은 로컬 이미지 업로드 부분입니다. 여기서는 로컬 이미지 업로드 부분만 수정하고, 파일 업로드를 포함한 나머지 부분은 유사합니다.

작업 주소를 Seven Niu 업로드 입구로 변경: http://upload.qiniu.com/, 원래 처리 주소는 /php/upload_json.php

숨겨진 양식 항목 추가:

파일 항목은 별도로 로드되기 때문에 여기서는 볼 수 없습니다. 즉, hideElements.join(''); 이전에 파일 이름을 변경하면 됩니다.

이제 KindEditor에 기본 양식 항목을 추가했지만 이제 토큰에는 값이 없습니다. 다음 단계는 구현하는 것입니다. 서버에서 토큰을 얻기 위한 ajax

내 접근 방식은 image.js 파일의 끝 부분에 바로 토큰을 얻기 위한 함수를 작성했습니다.

비동기 방식이기 때문에 위의 토큰 값을 변경하려면 jQuery를 사용해야 했습니다. 물론,. jQuery를 로드할 필요도 없고 직접 값을 설정하기 위해 네이티브 js를 사용하는 것이 더 좋을 것 같습니다. 이유는 원래 jQuery에서 사용하는 val() 메소드가 작동하지 않아서 attr()

위는 업로드 후의 콜백 함수입니다. 반환되는 데이터는 두 개의 매개변수가 포함된 json 형식입니다. 물론 콜백을 처리하는 프로그램은 나중에 추가될 것입니다.

업로드 성공:

{"error":0,"url":" https://dn-lanbaidiao.qbox.me/FryyQrpKYDDZrkJGWchh9_9og6Du" }

업로드 실패:

{"error":1,"message":"xxx error message"}

ps 이 기능은 특별히 수정하실 필요는 없습니다. 개인 사정에 따라 다르니 여기까지만 말씀드리겠습니다. 설명

이 시점에서 KindEditor가 수정을 완료했습니다. 다음 단계는 Qiniu의 php 파일을 수정하고 callBack.php 및 getToken.php를 추가하는 것입니다.

2. 백엔드 코드 수정

먼저 Qiniu의 SDK 소스 코드를 다운로드하세요. 저는 여기서 PHP를 사용하고 있습니다: Qiniu SDK(PHP 버전)

디렉터리 구조는 다음과 같습니다

주로 src/Qiniu/Auth.php 파일을 수정하고 callBack.php와 getToken.php를 같은 디렉토리에 추가합니다. 즉,

#1 Auth.php

여기서 중요한 점은 업로드 이벤트를 스스로 처리할 수 있는 콜백 파일, 즉 callBack.php를 추가하는 것입니다. 그렇지 않으면 KindEditor Frame이 이미지 업로드를 처리하는 데 사용되기 때문에 js는 도메인 간 오류를 보고할 것입니다. 이것이 바로 제가 Qiniu의 콜백을 직접 사용하지 않고 제가 알기 전에 오랫동안 여기에 직접 작성하는 이유입니다.

은 내 자신의 콜백을 사용해야 합니다. 콜백의 전제는 Qiniu의 콜백 주소가 귀하의 콜백 주소로 점프하고 콜백 매개변수를 콜백 프로그램에 전달하도록 하는 것이므로 returnUrl을 추가하세요

먼저 작성하면 getToken.php가 Qiniu 토큰을 생성합니다. Qiniu의 사용 원리를 모르는 경우 먼저 공식 문서인 Qiniu Document

그 다음에는 callBack.php가 있습니다(원래 kindEditor의

upload_json.php 역할을 대체). 상황에 맞게 매개변수를 설정하세요. image.js와 일관성을 유지하세요

마지막으로 kindEditor를 사용하여 이미지 업로드를 테스트해 보세요. 주소가 Qiniu Cloud Storage 주소로 변경되어 크게 줄어듭니다. 서버 트래픽 및 저장 공간에 대한 압박

위 내용은 관련 내용을 포함하여 KindEditor 사진을 Qiniu Cloud에 업로드하는 방법을 소개한 내용으로, PHP 튜토리얼에 관심이 있는 친구들에게 도움이 되기를 바랍니다.