angularJS+Ionicでモバイル画像アップロード機能を実装

今回は、モバイル画像アップロード機能を実装するための angularJS+Ionic と、モバイル画像アップロード機能を実装するための notes について説明します。

画像アップロードの問題は、フロントエンド開発でよく発生します。ただし、画像アップロード プラグインによっては、別のプラグインが必要になる場合があります。プラグインをプロジェクトに追加すると、時間が経つにつれて、プロジェクトは目立たなくなり、プラグイン間で競合が発生する場合があります。そのため、画像をアップロードするメソッドを自分で作成できます。

今日のデモは、友人のために作成されたモバイル WeChat パブリック アカウント プロジェクトです。プロジェクト アーキテクチャは、DOM 上で jQuery を操作する方がはるかに便利なので、angular+ionic を採用していますが、jQuery は比較的重いため、最終的には軽量のものを使用することにしました。プロジェクトの運営はzeptoが担当します。

プロジェクトの要件の 1 つは、個人の作品をアップロードすることです。この機能を実装するには、新しい H5 オブジェクト FormData オブジェクト、XMLHttpRequest オブジェクト、および FileReader オブジェクトが必要です。必要なのはこれら 3 つのオブジェクトだけです。コードについてはあまり説明しません。

機能1:

りー

機能2：

りー

機能3:

りー

画像アップロード全体の DOM 層は非常に単純で、フォームとフォームをトリガーする関数 (function1) です。 function1でのクリックイベントを取得し、画像選択時に判定を行い、サポートされている画像種類の範囲を超えた場合はリマインダーを発行します。

その後、function2 と function3 を呼び出します。

function2 でフォーム オブジェクトを取得し、FormData オブジェクトを作成し、取得したフォームを FormData に渡し、画像をアップロードするためのパラメーターを追加します。別の新しいものを作成する XMLHttpRequest オブジェクトを使用して、XHR リクエスト インターフェイスを開き、send(formData) によってインターフェイスにパラメーターが渡されます。

この時点で、インターフェイスは正常に送信されます。

ここでの 4 つのパラメーターは、formData の 4 つのパラメーターです

したがって、インターフェイスは成功します。

ここで問題が発生します。画像のアップロードはデータベースに正常に書き込まれますが、この時点ではユーザーにローカルに表示する必要がありますが、Web ページはデバイスのローカル画像に直接アクセスできないため、FIleReader が必要です。アップロードされた画像ファイルをローカルに表示される DataURL として読み取るオブジェクト。

まず、FileReader オブジェクトを新規作成し、取得した入力ファイル オブジェクトを FileReader の readAsDataURL() メソッドに渡します。このメソッドは、ファイルを DataURL として読み取ります。

次に、FileReader の onload メソッドを呼び出します。このメソッドの結果には変換された URL が含まれるため、実際には Base64 でエンコードされたこの URL を取得できます。画像リストの最後まで押してください

これにより、フロントエンドがローカル画像を表示し、ページが再度更新されると、データベース内のデータが取得されます。もちろん、これは単なる方法です。はい、さまざまなドラッグ アンド ドロップでアップロードできる画像アップロード プラグインも多数あります。これは、プラグインを導入せずにプロジェクト内の単純な画像アップロード機能に適しています。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue2.x双方向バインディングカプセル化の詳細な説明

cliコマンドラインツールとしてのNpm

非同期実装の実現を約束

以上がangularJS+Ionicでモバイル画像アップロード機能を実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。