KindEditor の写真が Qiniu Cloud にアップロードされます

私はエディターとしてKindEditorを使用していますが、サーバーは仮想ホストを使用しているため、無料のクラウドに写真を置くことを考えています。 KindEditor と Qiniu の SDK のソース コードを見る前は混乱しており、オンラインで検索しても同様の解決策がなかったので、引き続きソース コードを見て自分で実行する必要がありました。一晩中、私はそれについて話しましょう:

バージョンの説明:

KindEditor バージョン: 4x

Qiniu SDK: 7.x.x

バックエンド スクリプト: PHP

まず、ここで Qiniu によって提供された 2 つのフォーム アイテム ファイルとトークンが必要であることを見てみましょう

。 1 KindEditor の plugins/image/image.js ファイルを変更します

20 行目で、Qiniu と一致するように、アップロードしたファイルの名前フィールドを変更します。つまり、コメントされた行が元のコードです​​。

2 番目の変更はローカルです。画像アップロード部分については、ここではローカル画像アップロードの変更のみを行います。ファイルのアップロードを含め、アクション アドレスを Qiniu のアップロード入口に変更します。 Upload.qiniu.com/、元の処理アドレスは /php/upload_json.php です

非表示のフォーム項目を追加します:

ファイル項目に関しては、hiddenElements.join(''); という別個にロードされるため、ここでは表示されません。これは、の前にファイルの名前を変更するだけです。

この時点で、KindEditor に基本的なフォーム項目を追加しましたが、トークンには値がありません。次のステップは、サーバーからトークンを取得するために ajax を実装することです

。

私のアプローチは、image.js ファイルの最後に直接記述することです。トークンを取得する関数があります:

これは非同期メソッドであるため、jQuery を使用して変更する必要がありますもちろん、上記のトークンの値は、 jQuery をロードせずにネイティブ js を使用して実装する方が良いでしょうが、 getElementById を使用して値を直接設定することはできないようです。理由はわかります。jQuery で元々使用されていた val() メソッドが機能しなかったため、attr() を使用する必要がありました

上記はアップロード後のコールバック関数です。返されるデータは json です。もちろん、コールバックを処理するプログラムは後で追加します。アップロードが成功したときのコールバック パラメータの数は、

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

アップロードに失敗しました:

{"エラー":1,"メッセージ":"xxx エラー メッセージ"}

ps、この機能は変更する必要はありません。個人的な状況によって異なります。ここでは単なる説明です

この時点で、KindEditor は変更されました。次のステップは、Qiniu の php ファイルを変更し、callBack.php と getToken.php

を追加することです。 2. バックエンドコードの修正

まず、ここでPHPを使用しているQiniuのSDKソースコードをダウンロードします。 Qiniu SDK (PHPバージョン) ディレクトリは次のような構造です

主に src/Qiniu/Auth.php ファイルを変更し、callBack.php と getToken.php を同じディレクトリに追加します。つまり、

#1 Auth.php

主なことは、アップロード イベントを単独で処理できるコールバック ファイル、つまり callBack.php を追加することです。コールバック アドレスは Web サイトのアドレスと同じドメイン名である必要があり、それ以外の場合は js であることに注意してください。 KindEditor はフレームを使用するため、クロスドメイン エラーが報告されます。 画像のアップロードを処理するために、Qiniu のコールバックを直接使用せず、自分でコールバックを作成するのはこのためです。自分のコールバックを使用するには、Qiniu のコールバック アドレスをジャンプさせます。コールバック アドレスに移動し、コールバック パラメーターをコールバック プログラムに渡します。そのため、returnUrl を追加します

次に、Qiniu トークンを生成するために getToken.php を記述します。 Qiniu がどのように使用されるかはわかりません。最初に公式ドキュメントを読むことをお勧めします: Qiniu ドキュメント

、次に callBack.php (元の kindEditor の upload_json.php
の関数を置き換える)、そして状況に応じてパラメータを変更しますが、image.js と組み合わせる必要があります。一貫性を維持します

最後に、kindEditor を使用して画像のアップロードをテストします。これにより、アドレスが Qiniu Cloud Storage のアドレスに変更され、プレッシャーが大幅に軽減されます。サーバーのトラフィックとストレージ容量に

上記では、Qiniu Cloud への KindEditor 画像のアップロードについて、関連コンテンツも含めて紹介しています。PHP チュートリアルに興味のある友人に役立つことを願っています。