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中文网其他相关文章！