隨著行動網路的普及，越來越多的應用程式需要上傳文件，如頭像、照片、文件等等。而文件上傳的過程中，使用者往往需要等待一段時間來完成上傳，這時候，進度條就是一個非常好的展示方式。近年來，uniapp成為行動裝置開發的熱門框架之一，本文將介紹如何使用uniapp實現進度條上傳檔案的功能。
一、前知識
在深入學習本文之前，你需要掌握以下技能：
二、準備工作
首先，請確保你已經安裝了vue-cli，然後利用vue-cli建立一個uniapp的專案。因為本文主要講解文件上傳功能的實現，所以將不會涉及其他功能的實現。
三、實作過程
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.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中文網其他相關文章！
