uniapp melaksanakan muat naik bar kemajuan

Dengan populariti Internet mudah alih, semakin banyak aplikasi memerlukan muat naik fail, seperti avatar, foto, dokumen, dsb. Semasa proses muat naik fail, pengguna selalunya perlu menunggu tempoh masa untuk menyelesaikan muat naik Pada masa ini, bar kemajuan adalah kaedah paparan yang sangat baik. Dalam beberapa tahun kebelakangan ini, uniapp telah menjadi salah satu rangka kerja yang popular untuk pembangunan mudah alih Artikel ini akan memperkenalkan cara menggunakan uniapp untuk melaksanakan fungsi memuat naik fail dengan bar kemajuan.

1. Pengetahuan prasyarat

Sebelum mempelajari artikel ini secara mendalam, anda perlu menguasai kemahiran berikut:

1. Penggunaan asas uniapp
2. ajax Cara menggunakan permintaan tak segerak
3. Operasi asas muat naik fail

2. Pertama sekali, pastikan anda telah memasang vue-cli, dan kemudian. gunakan vue-cli mencipta projek uniapp. Kerana artikel ini menerangkan terutamanya pelaksanaan fungsi muat naik fail, ia tidak akan melibatkan pelaksanaan fungsi lain.

3. Proses pelaksanaan

Buat komponen muat naik fail dan komponen bar kemajuan

1. 1.1 Cipta komponen muat naik fail

Dalam uniapp rangka kerja , fungsi muat naik fail boleh dilaksanakan dengan mudah dengan menggunakan kawalan muat naik uni. Cipta komponen Muat Naik di bawah folder komponen, kodnya adalah seperti berikut:

<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 Cipta komponen bar kemajuan

Menggunakan komponen uni-progress dalam perpustakaan komponen uniui boleh melaksanakan kemajuan dengan mudah fungsi bar. Buat komponen ProgressBar di bawah folder komponen, kodnya adalah seperti berikut:

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

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

Laksanakan fungsi bar kemajuan muat naik

2. 2.1 Dapatkan kemajuan muat naik fail

Muat naik fail Semasa proses, pelayan akan mengembalikan kemajuan muat naik dengan sewajarnya. Kita boleh mendapatkan kemajuan muat naik dengan mendengar peristiwa kemajuan objek XMLHttpRequest. Tambahkan kod berikut pada komponen Muat Naik:

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

Dalam kaedah uploadFile, gunakan objek XMLHttpRequest untuk mencipta permintaan POST dan mendengar peristiwa kemajuan atribut muat naik objek XMLHttpRequest. Setiap kali peristiwa muat naik berlaku, kaedah updateProgress akan dicetuskan untuk mengemas kini peratus data dalam komponen.

2.2 Batalkan muat naik fail

Semasa proses muat naik fail, pengguna mungkin perlu membatalkan operasi muat naik. Untuk menyokong operasi pembatalan, kami perlu menambah butang batal pada komponen Muat Naik, dan juga perlu menambah logik pembatalan muat naik pada kaedah muat naikFail.

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

Apabila pengguna mengklik butang batal muat naik, kaedah cancelUpload akan dilaksanakan Pada masa ini, operasi muat naik akan dibatalkan dengan memanggil kaedah batalkan objek XMLHttpRequest.

4. Ringkasan

Dalam artikel ini, kami melaksanakan fungsi bar kemajuan muat naik fail dengan menggunakan rangka kerja uniapp yang digabungkan dengan komponen dalam perpustakaan komponen uniui. Dengan peristiwa onprogress objek XMLHttpRequest, kami boleh mendapatkan kemajuan muat naik dalam masa dan membatalkan operasi muat naik dengan memanggil kaedah batalkan objek XMLHttpRequest. Ciri kecil ini bukan sahaja dapat meningkatkan pengalaman pengguna aplikasi, tetapi juga membantu pembangun lebih memahami penggunaan objek XMLHttpRequest dan prinsip asas rangka kerja uniapp.

Atas ialah kandungan terperinci uniapp melaksanakan muat naik bar kemajuan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!