uniapp はプログレスバーのアップロードを実装します

モバイル インターネットの普及に伴い、アバター、写真、ドキュメントなどのファイルをアップロードする必要があるアプリケーションがますます増えています。ファイルのアップロード プロセス中、ユーザーはアップロードが完了するまでしばらく待つ必要があることがよくありますが、このとき、プログレス バーは非常に優れた表示方法です。近年、モバイル開発で人気のフレームワークのひとつとなっているuniappですが、この記事ではuniappを使ってプログレスバー付きのファイルアップロード機能を実装する方法を紹介します。

1. 前提知識

この記事を詳しく学ぶ前に、次のスキルを習得する必要があります:

1. uniapp の基本的な使用法
2. ajax 非同期リクエストの使い方
3. ファイルアップロードの基本操作

2.準備

まず、vue-cli がインストールされていることを確認してください。次に、vue-cli を使用して uniapp プロジェクトを作成します。この記事では主にファイルアップロード機能の実装について説明するため、他の機能の実装については触れません。

3. 実装プロセス

1. ファイル アップロード コンポーネントとプログレス バー コンポーネントの作成

1.1 ファイル アップロード コンポーネントの作成

ユニアプリ内フレームワークでは、uni-upload コントロールを使用することでファイルアップロード機能を簡単に実装できます。コンポーネント フォルダーにアップロード コンポーネントを作成します。コードは次のとおりです。

<template>
  <view>
    <uni-upload class="upload-btn" :upload-url="uploadUrl" />
  </view>
</template>

<script>
export default {
  name: "Upload",
  props: {
    uploadUrl: {
      type: String,
      default: ""
    }
  }
};
</script>

<style lang="scss">
.upload-btn {
  width: 100px;
  height: 50px;
  background-color: #409eff;
  color: #fff;
  border: none;
  border-radius: 4px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  user-select: none;
}
</style>

1.2 プログレス バー コンポーネントの作成

プログレス バー機能は、uni-progress コンポーネントを使用して簡単に実装できます。 uniui コンポーネント ライブラリ。コンポーネント フォルダーの下に ProgressBar コンポーネントを作成します。コードは次のとおりです。

<template>
  <view>
    <uni-progress :percent="percent" />
  </view>
</template>

<script>
export default {
  name: "ProgressBar",
  props: {
    percent: {
      type: Number,
      default: 0
    }
  }
};
</script>

2. アップロード プログレス バー関数を実装します

2.1 ファイル アップロードの進行状況を取得します

ファイルのアップロード プロセス中、サーバーはアップロードの進行状況を適宜返します。 XMLHttpRequest オブジェクトの progress イベントをリッスンすることで、アップロードの進行状況を取得できます。次のコードを Upload コンポーネントに追加します。

<template>
  <view>
    <uni-upload class="upload-btn" :upload-url="uploadUrl" @change="onChange" />
    <ProgressBar :percent="percent" />
  </view>
</template>

<script>
import ProgressBar from "../components/ProgressBar";

export default {
  name: "Upload",
  props: {
    uploadUrl: {
      type: String,
      default: ""
    }
  },
  components: {
    ProgressBar
  },
  data() {
    return {
      percent: 0,
      uploadRequest: null
    };
  },
  methods: {
    onChange(e) {
      const file = e.target.files[0];
      if (!file) return;
      this.uploadRequest = this.uploadFile(file);
    },
    uploadFile(file) {
      const formData = new FormData();
      formData.append("file", file);
      const xhr = new XMLHttpRequest();
      xhr.open("POST", this.uploadUrl);
      xhr.upload.addEventListener("progress", this.updateProgress);
      xhr.send(formData);
      return xhr;
    },
    updateProgress(e) {
      const percent = ((e.loaded / e.total) * 100).toFixed(2);
      this.percent = percent;
    }
  }
};
</script>

uploadFile メソッドで、XMLHttpRequest オブジェクトを使用して POST リクエストを作成し、XMLHttpRequest オブジェクトのアップロード属性の進行状況イベントをリッスンします。アップロード イベントが発生するたびに、updateProgress メソッドがトリガーされ、コンポーネント内のパーセント データが更新されます。

2.2 ファイルのアップロードのキャンセル

ファイルのアップロード プロセス中に、ユーザーはアップロード操作をキャンセルする必要がある場合があります。キャンセル操作をサポートするには、Upload コンポーネントにキャンセル ボタンを追加する必要があり、また、uploadFile メソッドにアップロードキャンセルロジックを追加する必要があります。

<template>
  <view>
    <uni-upload class="upload-btn" :upload-url="uploadUrl" @change="onChange" />
    <ProgressBar :percent="percent" />
    <view class="controls">
      <view class="btn" @click="cancelUpload">取消上传</view>
    </view>
  </view>
</template>

<script>
import ProgressBar from "../components/ProgressBar";

export default {
  name: "Upload",
  props: {
    uploadUrl: {
      type: String,
      default: ""
    }
  },
  components: {
    ProgressBar
  },
  data() {
    return {
      percent: 0,
      uploadRequest: null
    };
  },
  methods: {
    onChange(e) {
      const file = e.target.files[0];
      if (!file) return;
      this.uploadRequest = this.uploadFile(file);
    },
    uploadFile(file) {
      const formData = new FormData();
      formData.append("file", file);
      const xhr = new XMLHttpRequest();
      xhr.open("POST", this.uploadUrl);
      xhr.upload.addEventListener("progress", this.updateProgress);
      xhr.send(formData);
      return xhr;
    },
    updateProgress(e) {
      const percent = ((e.loaded / e.total) * 100).toFixed(2);
      this.percent = percent;
    },
    cancelUpload() {
      if (this.uploadRequest) {
        this.uploadRequest.abort();
      }
    }
  }
};
</script>

<style lang="scss">
.controls {
  margin-top: 10px;
}

.btn {
  background-color: #ff4949;
  color: #fff;
  width: 100px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}
</style>

ユーザーがアップロードキャンセルボタンをクリックすると、cancelUploadメソッドが実行され、このときXMLHttpRequestオブジェクトのabortメソッドを呼び出すことでアップロード操作がキャンセルされます。

4. 概要

この記事では、uniapp フレームワークと uniui コンポーネント ライブラリのコンポーネントを組み合わせて、ファイル アップロードのプログレス バー機能を実装しました。 XMLHttpRequest オブジェクトの onprogress イベントを使用すると、アップロードの進行状況を時間内に取得し、XMLHttpRequest オブジェクトの abort メソッドを呼び出してアップロード操作をキャンセルできます。この小さな機能は、アプリケーションのユーザー エクスペリエンスを向上させるだけでなく、開発者が XMLHttpRequest オブジェクトの使用法と uniapp フレームワークの基本原理をより深く理解するのにも役立ちます。

以上がuniapp はプログレスバーのアップロードを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。