Vue.js と組み合わせたフロントエンド画像圧縮ソリューション

これは非常に簡単な解決策です。まあ、それは本当です。

なぜこのようなことをするのか?

モバイル Web が急成長している現在、ユーザーがモバイル Web に画像ファイルをアップロードする必要があるアプリケーションが多すぎるため、克服しなければならないいくつかの困難があります。ネットワークが低い 高速でアップロードの進行が遅く、ユーザーエクスペリエンスが劣悪です

高い同時実行下では、アップロードされた大きなファイルのバックグラウンド処理にストレスがかかります

もしかしたらもっとあるかもしれません...

上記の問題のいくつかを克服するとき、また、いくつかの質問を自問することもできます:

ユーザーがアップロードした元の画像を保存するのは本当に必要ですか?

ユーザーはどれくらい待つことができますか?

もしかしたらもっとあるかもしれません...

上記の問題のいくつかと組み合わせると、実際のケースと組み合わせて質問すると、これができるかもしれません。ユーザーが画像をアップロードすると、画像はバックグラウンドに送信される前に圧縮されます。画像ファイルのサイズが小さくなると、同じ同時実行環境下では当然アップロード速度も向上し、バックグラウンドの処理速度も向上し、ユーザー エクスペリエンスが向上します。

一部の主流の CDN のフォーム機能を使用して、CDN にファイルを直接アップロードしないのではないかと言う人もいるかもしれません。もちろん、私は使用する多くのオプションの中から 1 つを選択しただけです。プログラマですか?

準備

「ユーザーが画像をアップロードすると、画像はバックグラウンドに送信される前に圧縮される」と上で述べました。それでは、すぐにさまざまなツールを準備しましょう:

localResizeIMG (core, used toフロントエンドで画像を圧縮します)

Vue.js (フロントエンドデータの処理、ロジックを表示します)

Bootstrap (もっと言うべきでしょうか?)

やり方は?

プロジェクトをアップロードします 変更後、localResizeIMGを使用します圧縮します

好きなように背景にデータを送信します

localResizeIMGを呼び出すと、圧縮された画像の幅、高さ、品質を指定できます（詳細はドキュメントを参照してください）。バックグラウンドでは、ライブラリの wiki で説明されているソリューションを参照できます。すべてが非常に簡単です。

デモ アドレス

この例のリポジトリ アドレス

この記事の解決策が唯一の解決策ではなく、また、それが必ずしも最善であるとは限りません。関連するフレームワーク/ライブラリの使用中に問題が発生した場合は、対応する Github リポジトリにアクセスしてください。問題または Wiki を表示します。