1. 什么是uniapp
Uni-app 是一个基于 Vue.js 的多端开发框架，能够将 Vue 代码编译打包成微信小程序、H5、APP 等多个平台的应用，减少了开发成本，可大大提高开发效率。
在 Uni-app 中，我们可以使用 Vue.js 语法开发应用，也可以使用它本身提供的语法和组件库进行开发。此外，框架还提供了本地插件和平台 API，用于提供更强大的功能和更好的用户体验。
2. 实现进度条上传的步骤
2.1 基本思路
实现进度条上传的基本思路是，在上传文件时，获取文件的上传进度（百分比），并将其实时展示在页面上。对于小文件，上传过程很快，可能一下子就完成了，所以可以使用原生的上传方式，但对于大文件，如果单纯依赖于原生的上传方式，会出现上传时间过长，没有及时反馈进度的问题，用户体验不佳。因此，我们需要使用 WebSocket 来实现文件上传，并通过 WebSocket 将文件上传的进度实时返回给用户。
2.2 基本实现步骤
1. 在前端页面中，添加上传文件的表单，并为其添加 onChange 事件监听器，实现文件的获取和上传：
<strong>/** 定义上传文件表单 */</strong>
<input type="file" @change="handleUpload">
<strong>/** 定义 onChange 事件监听器 */</strong>
<script>
export default {
<strong>methods: {</strong>
handleUpload(event) {
const file = event.target.files[0];
this.uploadFile(file);
}
}
}
</script>
2. 使用 WebSocket 将文件上传至服务器，并按照上传进度实时返回给前端页面：
<strong>/** 定义 uploadFile 方法 */</strong>
<script>
export default {
<strong>methods: {</strong>
uploadFile(file) {
<strong>/** 创建 WebSocket 连接 */</strong>
const ws = new WebSocket('ws://localhost:8000/upload');
<strong>/** WebSocket 打开连接事件 */</strong>
ws.onopen = () => {
console.log('WebSocket connected');
ws.send(file);
};
<strong>/** WebSocket 下载进度事件 */</strong>
ws.onmessage = (event) => {
const percent = parseFloat(event.data);
this.percentage = Math.floor(percent * 100);
};
}
},
<strong>data() {</strong>
return {
percentage: 0 <strong>/** 初始化上传文件进度百分比为 0 */</strong>
}
}
}
</script>
3. 在前端页面中，使用 ElementUI 或其他 UI 框架中的进度条组件，来展示文件上传的进度：
<strong>/** 引入进度条组件 */</strong>
<template>
<div>
<el-progress v-model="percentage" :stroke-width="18" :text-inside="true"></el-progress>
</div>
</template>
一个简单的基于 WebSocket 实现的文件上传进度条就开发完成了。可以看到，Uni-app 在开发中非常方便，它支持使用 Vue.js 语法开发应用，与使用原生语法和组件库进行开发，开发效率非常高。
3. 总结
本文介绍了如何使用 Uni-app 中的 WebSocket 进行文件上传，并将上传进度实时返回给前端页面以展示文件上传进度。虽然本文的示例使用的是文件上传，但这种实时进度条显示在其他工程中同样适用。另外，Uni-app 开发效率高，可将 Vue.js 代码编译打包成多个应用程序。如果您是前端开发人员，Uni-app 是您值得尝试的开发框架。