web-dev-qa-db-ja.com

axiosを備えたプログレスバー

進行状況バーを使用して、ファイルのアップロードステータスを表示する必要があります。私はaxiosを使用してhttpリクエストを作成しています。私は彼らのgithubページから例に従いました https://github.com/mzabriskie/axios/blob/master/examples/upload/index.html

私のコードは次のようになります。

_this.store().then(() => {
    var form = new FormData();
        form.append('video', this.file);
        form.append('uid', this.uid);

        axios.post('/upload', form, {
            progress: (progressEvent) => {
                    if (progressEvent.lengthComputable) {
                       console.log(progressEvent.loaded + ' ' + progressEvent.total);
                       this.updateProgressBarValue(progressEvent);
                    }
           }
       })                   
});
_

ただし、console.log(progressEvent.loaded + ' ' + progressEvent.total);を実行することも、this.updateProgressBarValue(progressEvent);を呼び出すこともありません。

どうすれば解決できますか？

私はjavascriptの世界は初めてです。

javascriptprogress-barvuejs2axios
16
Pritam Bohra

答えを見つけました。イベントの名前はonUploadProgressで、progressを使用していました

13
Pritam Bohra

Axios configuration 自体を読むことができるので、問題は「進行」イベント自体にあると思います。進行状況はサポートされていません。代わりに、onUploadProgressまたはonDownloadProgressをリッスンする必要があります

別の問題は、私が次の方法で試したtotalLengthを取得することです：lengthComputableの場合、ヘッダーから長さを取得しようとしない場合、圧縮されていないコンテンツの長さを取得し、最後の手段として取得する場合あなたが値で望むものは何でも。

これは絶対確実な実装ではありません！totalLengthが利用できないときはいつでも失敗します。

それをもう少し強固にするために、setIntervalを使用して「偽の」進行状況を実装し、進行状況を1秒ごとに手動で増分できます。約束が解決したら、進行状況を手動で100％に設定します。 CSSトランジションを使用して実装する場合、進行状況が常に「正しい」とは限らない場合でも、スムーズなソリューションを取得する必要があります

さらにコードが必要な場合は、同様のローダーを作成しました（ GitHub link ）。

                onUploadProgress: (progressEvent) => {
                const totalLength = progressEvent.lengthComputable ? progressEvent.total : progressEvent.target.getResponseHeader('content-length') || progressEvent.target.getResponseHeader('x-decompressed-content-length');
                console.log("onUploadProgress", totalLength);
                if (totalLength !== null) {
                    this.updateProgressBarValue(Math.round( (progressEvent.loaded * 100) / totalLength ));
                }
            });
17
Samuel Bergström

これは、あまりコーディングせずにこれを達成するための非常に便利なライブラリです。 https://github.com/rikmms/progress-bar-4-axios/

1
Sohail