uniapp实现进度条上传

百变鹏仔 4周前 (11-20) #uniapp

文章标签进度条

随着移动互联网的普及，越来越多的应用需要上传文件，如头像、照片、文档等等。而文件上传的过程中，用户往往需要等待一段时间来完成上传，这时候，进度条就是一个非常好的展示方式。近年来，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"></uni-upload></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"></uni-progress></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"></uni-upload><progressbar :percent="percent"></progressbar></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"></uni-upload><progressbar :percent="percent"></progressbar><view class="controls"><view class="btn">取消上传</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实现进度条上传

详解uni-app（vue）基于InnerAudioContext封装一个基本的音频组件

什么是uni-app

uni-app之小程序包大小优化

uni-app在不同平台下拨打电话的示例

uni-app适配到微信小程序注意事项