axiosを使ってプログレスバー機能付きで写真をアップロードする方法

Axios は、ブラウザーと Node.js で使用できる Promise ベースの HTTP ライブラリです。この記事では、主に axios を使用して画像アップロードのプログレスバーを実装する方法を紹介します。必要な方は参照してください。Axios は、ブラウザーと Node.js で使用できる Promise ベースの HTTP ライブラリです。

機能

ブラウザからXMLHttpRequestを作成

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

Promise APIをサポート

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

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

リクエストをキャンセル

自動JSONデータを自動的に変換する

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

以下は、axios を使用して画像アップロードのプログレスバー機能を実装する方法の紹介です。具体的な内容は次のとおりです。 最近のプロジェクトでは、アップロードの最大数が制限されています。モバイル ページの場合 10 枚の写真は圧縮されていますが、ネットワーク カードを使用すると、アップロード時間が非常に遅くなり、ユーザーにはわかりません。アップロードの進行状況をより直感的に表示するには、進行状況バーとアップロードの割合を表示するのが最適です。プロジェクトは、UI フレームワークとして vuejs フレームワーク、mint-ui を使用します。 axios は vue によって公式に推奨されています (非常に強力です); axios 公式では、ネイティブのアップロード処理進行状況イベントの使用が導入されました (詳細については、こちらを参照してください。中国語での axios の公式紹介はこちらです):

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

vuejs を使用しているため、管理の便宜上、インターフェースからのデータ要求は一元管理する必要があります。各コンポーネントに配置すると、将来のメンテナンスと管理に不便になります。reqwest.js ファイルでは、このメソッドには 3 つのパラメータ (パラメータと 2 つのコールバック関数) が定義されています。画像の必須パラメータ。最初のコールバック関数はアップロードの進行状況に含まれるデータを取得し、2 番目のコールバックはアップロードが成功または失敗した場合に次のステップを実行するために返されるデータを取得します。ページ操作。

 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" を定義します。定義するときは、

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

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

const _this = this;
API.uploadPhoto(fd,(res) =>{
 let loaded = res.loaded,
   total = res.total;
   _this.$nextTick(() =>{
    _this.precent = (loaded/total) * 100;
   })
},(res) =>{
  if(res.code === '200'){
    MessageBox.alert('图片上传成功').then(action => {
     console.log('ok');
    });
  }
})

基本的には上記の方法に基づいて画像のアップロードの進行状況とパーセント表示を実現します。残りは UI であり、自分の個性に合わせてカスタマイズして完璧なニーズを実現できます...

上記は私が行ったものです。将来すべての人に役立つことを願っています。

関連記事:

ionic3でランダムレイアウトのウォーターフォールフローを実装する方法

ReactプロジェクトでReduxを使用する方法(詳細なチュートリアル)

JavaScriptで数値の自動増加を実装する方法

Swiperの使用ページネーターの使用方法

Vue コンポーネント通信でバスを使用する方法

Angular で機密テキスト プロンプトを実装する方法

Angular で非表示の表示を実装する方法

以上がaxiosを使ってプログレスバー機能付きで写真をアップロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。