English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 現在の位置
  2. ホームページ
  3. 経験の記録
  4. 本文

axiosを使用して画像アップロードのプロセスバー機能を実現する

AxiosはPromiseに基づいたHTTPライブラリで、ブラウザとnode.jsで使用できます。

機能

ブラウザからXMLHttpRequestを作成

node.jsからHTTPリクエストを作成

Promise APIをサポート

リクエストとレスポンスのインターセプト

リクエストデータとレスポンスデータの変換

リクエストをキャンセル

JSONデータの自動変換

クライアントがXSRFを防護します

以下では、axiosを使用して画像のアップロードプロセスバー機能を実現する方法について紹介します。具体的な内容は以下の通りです：

　最近のプロジェクトで、携帯電話のページに最大で数十枚の画像をアップロードする必要がありました。写真には圧縮処理が施されていましたが、最終的には非常に大きなサイズでした。ネットワークの状態が悪い場合、アップロードにかかる時間が非常に悪くなります。常にロード中の状態が続くと、ユーザーは自分がどれだけアップロードしたか分かりません。アップロードの進捗をより直感的に表示するために、プロセスバーとアップロードのパーセンテージを表示するのが最適です；

　　プロジェクトはVue.jsフレームワークを使用しており、mint-uiはUIフレームワークであり、Vue公式が推奨するaxios（本当に強力です）を使用しています。axiosの公式では、原生のアップロード処理進捗イベント（以下を参照してください、ここにはaxiosの公式日本語紹介があります）：

 onUploadProgress: function (progressEvent) {
  // 原生進捗イベントの処理
 },

　　Vue.jsを使用しているため、インターフェースのデータリクエストを簡単に管理するために、統一された管理が必要です。各コンポーネントに配置すると、将来的な保守や管理が難しくなります；reqwest.jsファイル内でuploadPhotoメソッドを定義しており、このメソッドは3つのパラメータを持ちます。これらのパラメータは、アップロードする画像に必要な追加パラメータです。また、最初のカールバック関数は、アップロード進捗を含むデータを取得し、次のカールバックはアップロードの成功・失敗を示すバックエンドからのデータを取得し、ページの次の操作を行います。

 uploadPhoto(payload,callback1,callback2){
    axios({
      url:BASE_URL + '/handler/material/upload',
      method:'post',
      onUploadProgress:function(progressEvent){ //アップロード進捗のイベントを取得する原生方法
        if(progressEvent.lengthComputable){
          //属性lengthComputableは、全体の作業量と既に完了した作業が測定できるかどうかを示しています
          //lengthComputableがfalseの場合、progressEvent.totalとprogressEvent.loadedは取得できません
          callback1(progressEvent);
        }
      },
      data:payload
    }).then(res =>{
      callback2(res.data);
    }).then(error =>{
      console.log(error)
    }
  }

使用mint-uiコンポーネント内のProgressコンポーネントでは、dataメソッド内でこのコンポーネントの変数precentを定義します。この変数はnumber型であり、定義する際には注意してください；　

<mt-progress :value="precent" :bar"-height="10">
   <div slot="end">{{Math.ceil(precent)}}%</div>
  </mt-progress>

reqwest.js このファイルを import して、uploadPhoto このメソッドを取得し、アップロードの進捗状況を取得して、$nextTick この属性を使って、ページ上でリアルタイムに更新します。

const _this = this;
API.uploadPhoto(fd,(res) =>{
 let loaded = res.loaded;
   total = res.total;
   _this.$nextTick(() =>{
    _this.precent = (loaded/total) * 100;
   }

  if(res.code === '200'){
    MessageBox.alert('画像アップロード成功').then(action => {
     console.log('ok');
    });
  }
}

　　上記の方法に従えば、画像のアップロードプロセスとパーセンテージの表示が基本的に実現されます。残るのはUIです。個別のカスタマイズを実行して、完璧な要件を満たすようにしてください...

まとめ

以上は、axiosを使って画像アップロードのプロセスバー機能を実現する方法について紹介しました。皆様に役立つことを願っています。何かご不明な点があれば、コメントを残してください。編集者はすぐに回答します。また、呐喊教程サイトのサポートに感謝しています！

声明：この記事の内容はインターネットから収集され、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、当サイトは所有権を有しておらず、人工的に編集されていません。著作権侵害の疑いがある場合は、メールで notice#w までお知らせください。3codebox.com（メール送信時は、#を@に変更して報告してください。関連する証拠を提供していただければ、当サイトは侵害された内容をすぐに削除します。)

基礎教程
おすすめ