企业官网建设流程全解析

问题背景

在小程序开发中，文件上传是一个常见的功能需求。当用户上传较大的文件（如几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"