问题背景
在小程序开发中,文件上传是一个常见的功能需求。当用户上传较大的文件(如几MB的PDF、Word文档)时,上传过程可能需要较长时间(几十秒甚至一分钟以上)。
在这段时间内,如果没有适当的交互限制,用户可能会:
- 重复点击上传按钮,导致多次上传
- 点击返回按钮退出页面,导致上传中断
- 进行其他操作(如删除、编辑),造成数据不一致
- 误以为页面卡死,强制关闭小程序
这些情况都会带来糟糕的用户体验,甚至导致数据丢失。
解决方案
1. 添加上传状态标识
首先,我们需要一个状态变量来追踪当前是否正在上传:
constisUploading=ref(false)constuploadProgress=ref(0)2. 显示全屏遮罩层
在上传过程中,显示一个全屏遮罩层,阻止用户进行其他操作:
<template><viewclass="page"><!-- 上传遮罩层 --><viewv-if="isUploading"class="upload-overlay"><viewclass="overlay-content"><viewclass="upload-icon">📤</view><viewclass="upload-text">文件上传中...</view><viewclass="progress-text">{ { uploadProgress }}%</view><viewclass="progress-bar"><viewclass="progress-fill":style="{ width: uploadProgress + '%' }"></view></view><viewclass="upload-hint"