uniapp實作進度條上傳

隨著行動網路的普及，越來越多的應用程式需要上傳文件，如頭像、照片、文件等等。而文件上傳的過程中，使用者往往需要等待一段時間來完成上傳，這時候，進度條就是一個非常好的展示方式。近年來，uniapp成為行動裝置開發的熱門框架之一，本文將介紹如何使用uniapp實現進度條上傳檔案的功能。

一、前知識

在深入學習本文之前，你需要掌握以下技能：

1. uniapp的基本使用方法
2. ajax非同步請求的使用方法
3. 檔案上傳的基本操作

二、準備工作

首先，請確保你已經安裝了vue-cli，然後利用vue-cli建立一個uniapp的專案。因為本文主要講解文件上傳功能的實現，所以將不會涉及其他功能的實現。

三、實作過程

1. 建立檔案上傳元件和進度條元件

1.1 建立檔案上傳元件

在uniapp框架中，透過使用uni-upload控制項可以方便地實現檔案上傳的功能。在components資料夾下建立一個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 建立進度條元件

利用uniui元件庫中的uni-progress元件可以很方便地實作進度條的功能。在components資料夾下建立一個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物件的upload屬性的progress事件。每當上傳事件發生時，updateProgress方法都會被觸發，更新元件中的percent資料。

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方法來取消上傳作業。

四、總結

在本文中，我們透過使用uniapp框架結合uniui元件庫中的元件，實作了一個檔案上傳進度條功能。借助XMLHttpRequest物件的onprogress事件，我們能夠及時地取得上傳進度，並且可以透過呼叫XMLHttpRequest物件的abort方法來取消上傳操作。這個小功能不僅可以增加應用程式的使用者體驗，同時也可以幫助開發者更了解XMLHttpRequest物件的使用以及uniapp框架的基本原理。

以上是uniapp實作進度條上傳的詳細內容。更多資訊請關注PHP中文網其他相關文章！