JS plupload を使用して画像をバッチで直接 Youpai Cloud_javascript スキルにアップロードします

フォーラムや投稿バーでは、多くの場合、大量の写真を共有する必要があります。写真をアップロードする最悪の方法は、写真を中央サーバーにアップロードし、中央サーバーが静止画像サーバーに転送することです。この記事では、plupload を使用してアップロード プロセスを最適化し、サーバーをバイパスして画像をバッチで直接 Youpai Cloud にアップロードする方法を紹介します。この記事では、次の重要なポイントに焦点を当てます:

コードをコピーします コードは次のとおりです:

pupload ライブラリ
画像のローカル圧縮
写真を複数選択
サーバーをバイパスし、写真をバッチで直接 Youpai Cloud にアップロードします
Youpai の HTTP FORM API を使用する
pupload 構成

ライブラリのアップロード

plupload は、非常に機能豊富な画像アップロード プラグインです。バッチアップロードは、下位バージョンのブラウザでは Flash/Silverligh/html4 を通じてサポートされますが、上位バージョンのブラウザでは、最初に HTML5 インターフェイスがアップロードに使用されます。これらの決定はすべて自動で行われるため、非常に使いやすいと言えます。次に、plupload は、クライアント上で画像を圧縮したり、直接ドラッグ アンド ドロップしてアップロードしたりする機能もサポートしています。詳細については、公式 Web サイトを参照してください。

ここではコア API のみを使用し、ファイルを導入するだけで済みます。

コードをコピーします コードは次のとおりです:

公式のコア API の例は非常に簡単で、http://www.plupload.com/examples/core に直接アクセスして表示できます。コア API を理解するのは難しくありません。サポートが必要な場合は、この記事の後半で質問してください。

画像のローカル圧縮

一般に、ウェブ上で閲覧される写真の品質は高くありません。私が高校で PS を学んでいたとき、先生は、オンライン写真の解像度は 72 に設定すべきで、印刷された写真の解像度は 72 に設定すべきだと言いました。 300に設定してください。したがって、ユーザーが大きな写真をアップロードする場合、ユーザーのクライアントが画像をローカルで圧縮し、圧縮された小さい画像をアップロードすることをお勧めします。これにより、閲覧効果には影響せず、アップロード速度も向上し、負担が軽減されます。サーバー上で。

画像のローカル圧縮機能は、初期化時にサイズ変更パラメータを渡すだけでサポートされます。このうち、幅と高さは実際の状況に応じて設定でき、品質はより重要なパラメータです。名前が示すように、値を小さくすると画像は小さくなりますが、表示品質は低下します。これは自分で量る必要があります。

コードをコピーします コードは次のとおりです:

{
"サイズ変更": {
「幅」: 200、
「高さ」: 200、
「品質」：70
}
}

写真の複数選択

画像を一括アップロードするための前提条件は、複数の画像を選択できることです。複数選択ファイルは HTML5 の標準機能です。次の方法で複数選択モードを有効にできます:

コードをコピーします コードは次のとおりです:

<フォームアクション="xxx">
画像を選択します:

非常に優れた jquery プラグイン jQuery-File-Upload のブラウザ サポートにおける複数のファイルの選択セクションによると、IE はこの HTML5 機能のサポートを開始したばかりで IE10 までなので、Flash の魔法の力を使用する必要があります。以前のバージョンのブラウザで複数の画像の選択をサポートするため。幸いなことに、plupload はすでにこれを行っており、このスイッチはデフォルトで有効になっています。複数選択画像を使用する必要がないと思われる場合は、multi_selection: false を設定してこの機能をオフにすることができます。

サーバーをバイパスし、写真をバッチで Youpai Cloud に直接アップロードします

Youpaiyun は HTTP FORM API を提供します。このインターフェイスを通じて、独自のサーバーを経由せずにブラウザから画像をアップロードするリクエストを直接開始できるため、オーバーヘッドが大幅に削減されます。

Youpai の HTTP FORM API を使用する

このインターフェースを使用するには、Youpaiyun にフォームを送信する必要があります。このフォームにはアップロードするファイルが含まれており、ポリシーと署名も含める必要があります。ポリシーは、ストレージ パス、ファイル タイプ、前処理結果などのアップロード リクエスト関連のパラメーターを設定するために使用されます。さらに、アップロード リクエストの許可時間なども含まれます。署名はセキュリティ検証に使用されます。

デモンストレーションの便宜上、JavaScript を直接使用してポリシーと署名を生成します。ただし、実際に使用する場合はセキュリティ上の理由から、この処理はサーバー側で完了してください。次のコードは、主に公式テスト アカウントを使用して、公式デモに基づいてわずかに変更されています。これらの 2 つのパラメータの具体的な生成方法については、公式ドキュメントを参照してください: http://docs.upyun. api/form_api/。

コードをコピーします コードは次のとおりです:

var オプション = {
'バケット': 'デモンストレーション',
'保存キー': '/test/filename.txt',
'有効期限': Math.floor(new Date().getTime() / 1000) 86400
};
// パラメータをさらに表示: http://docs.upyun.com/api/form_api/#Form API インターフェイスの概要
var ポリシー = window.btoa(JSON.stringify(options));
// UPYUN ユーザー管理バックグラウンドからフォーム API を取得
var form_api_secret = '1 JY2ZqD5UVfw6hQ8EesYQO50Wo=';
// 署名を計算します
var 署名 = md5(ポリシー '&' form_api_secret);

plupload 構成

Youpaiyun の HTTP FORM API で plupload を動作させる方法は本当に頭が痛いです。 plupload のドキュメントを見ていたら、Amazon S3 へのアップロードへのリンクに惹かれたことに偶然気づきました。 Amazon S3 の正式名は Amazon Simple Storage Service で、提供されるクラウド ストレージ サービスは Youpaiyun にほぼ似ています。

そこで、この記事のブラウザ側設定の紹介に基づいて、Youpaiyun にアップロードするために必要な設定を考え出しました。実際、言うのは非常に簡単です。主なことは、url と multipart_params の 2 つのパラメータを設定することです。次の例では、options.bucket、policy、およびsignatureは、前のセクションで計算された値を直接使用します。

コードをコピーします コードは次のとおりです:

var Uploader = new plupload.Uploader({
...
URL: 'http://v0.api.upyun.com/' options.bucket,
Multipart_params: {
'Filename': '${filename}', // ランタイム間で一貫性を保つためにこれを追加します
'Content-Type': '',
'ポリシー': ポリシー、
'署名': 署名、
}、
...
});

概要

このようにして、ついに plupload を通じてサーバーをバイパスし、画像を一括で Youpai Cloud にアップロードできるようになりました。 plupload は実際には非常に強力なライブラリですが、商用利用には料金が必要です。詳細については、公式 Web サイトにアクセスしてください。

その主な理由は、このアイデアが非常に優れており、学ぶ価値があるからです。ご質問があれば、メッセージを残してください。一緒に進歩していけるでしょう。