angularJS+Ionicでモバイル端末に画像をアップロード（コード付き）

今回は、モバイル端末に画像をアップロードするための angularJS+Ionic について説明します (コード付き)。 angularJS+Ionic がモバイル端末に画像をアップロードするための 注意事項 は何ですか? 以下は実際的なケースです。一見。

フロントエンド開発では、画像のアップロードに関する問題がよく発生します。オンラインには多くの解決策がありますが、一部の画像アップロード プラグインには、画像のアップロードに関する問題が発生する可能性があります。他のプラグインをプロジェクトに導入すると、時間が経つとプロジェクトが目立たなくなり、場合によってはプラグイン間で競合が発生するため、画像をアップロードするメソッドを自分で作成できます。

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

js 構造:

機能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 サイトの他の関連記事に注目してください。

推奨読書:

Vue-Router のスクロール動作の使用方法の詳細な説明

パーティクルの動的背景アニメーションを実装するための Particles.js

Vue-router のルーティング メタ情報の使用方法の詳細な説明

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