axios で画像をアップロードするためにプログレスバーを追加する方法

今回は、axios でアップロードした画像に プログレスバー を追加する方法を説明します。見て。

で使用できる Promise ベースの HTTP ライブラリです。

ブラウザから XMLHttpRequest を作成します

Node.jsからhttpリクエストを作成します

Promise API をサポート

リクエストとレスポンスの傍受

リクエストデータとレスポンスデータを変換します

リクエストのキャンセル

JSONデータを自動変換

クライアントは XSRF に対する防御をサポートします

以下では、axiosを使用して画像アップロードプログレスバー機能を実装する方法を紹介します。具体的な内容は次のとおりです: 最近のプロジェクトでは、携帯電話のページに最大数十枚の写真をアップロードする必要があります。写真は圧縮されていますが、ネットワーク カードを使用すると、アップロード時間が非常に遅くなります。読み込み中、ユーザーはどれだけアップロードしたかがわかりません。アップロードの進行状況をより直感的に示すには、進行状況バーとアップロードの割合を表示するのが最適です。 プロジェクトは、UI フレームワークとして vuejs フレームワークである mint-ui を使用します。リクエストは、vue によって公式に推奨されている axios です (非常に強力です)。中国の axios 公式紹介):

 onUploadProgress: function (progressEvent) {
  // 对原生进度事件的处理
 },

vuejsを利用するため、管理を容易にするためにインターフェースからのデータリクエストを一元管理する必要があります。各コンポーネントに配置すると、将来のメンテナンスと管理に不便になります。reqwest.js ファイルでは、このメソッドには 3 つのパラメーター、つまりパラメーターと 2 つの

が定義されています。画像をアップロードするために必要なパラメータ。最初のコールバック関数はアップロードの進行状況に含まれるデータを取得し、2 番目のコールバック関数はアップロードの次のステップを実行するためにバックグラウンドから返されるデータを取得します。ページ操作。 りー mint-ui コンポーネントで Progress コンポーネントを使用し、data メソッドのコンポーネントで変数 "precent" を定義するときは、

 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)
    })
  }

に注意してください。 reqwest.js ファイルをインポートし、uploadPhoto メソッドを取得し、$nextTick 属性を使用して、アップロードの進行状況に基づいてページをリアルタイムで更新します。

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

推奨読書:

ajaxはステータスを直接変更し、非リフレッシュステータスを削除します

以上がaxios で画像をアップロードするためにプログレスバーを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。