随着移动互联网的普及，越来越多的应用需要上传文件，如头像、照片、文档等等。而文件上传的过程中，用户往往需要等待一段时间来完成上传，这时候，进度条就是一个非常好的展示方式。 近年来，uniapp成为移动端开发的热门框架之一，本文将介绍如何使用uniapp实现进度条上传文件的功能。
一、前置知识
在深入学习本文之前，你需要掌握以下技能：
- uniapp的基本使用方法
- ajax异步请求的使用方法
- 文件上传的基本操作
二、准备工作
首先，请确保你已经安装好了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框架的基本原理。
