uni-file-picker手动上传不显示进度

### 关于 `uni-file-picker` 组件手动上传时进度条不显示的问题 在处理 `uni-file-picker` 组件的手动上传过程中遇到的进度条无法正常显示的情况，可以考虑通过监听文件上传事件并自定义进度更新逻辑来解决问题。 #### 自定义上传方法与进度监控 为了确保进度条能够正确反映上传状态，建议采用如下方式： 1. **禁用默认自动上传行为** 配置 `autoUpload` 属性为 `false` 来阻止组件自动触发上传动作[^1]。 2. **绑定选择文件后的回调函数** 使用 `@select` 事件捕获用户选取文件的动作，并在此处准备待上传的数据列表。 3. **逐个发起上传请求** 对每一个选中的文件执行单独的上传操作，在此期间可以通过设置全局变量或对象属性记录当前正在上传的具体项及其对应的百分比进展。 4. **利用前端框架特性展示动态变化** 结合 Vue.js 的响应式机制或其他适合的技术手段实时刷新视图上的进度指示器。 5. **服务器端配合提供反馈信息** 后台应设计合理的 API 接口用于接收来自客户端发送过来的照片资料的同时返回必要的中间过程消息以便前端及时调整 UI 显示效果。 以下是具体的代码实现示例： ```javascript <template> <view class="content"> <!-- 文件选择器 --> <uni-file-picker ref="filePickerRef" v-model="imageValue" fileMediatype="image" mode="grid" :limit="9" @select="handleSelectFile"/> <!-- 手动上传按钮 --> <button type="primary" size="mini" @click="uploadFiles">立即上传</button> <!-- 进度条区域 --> <block v-for="(item, index) in uploadProgresses" :key="index"> {{ item.name }}: <progress :percent="item.percent"></progress> </block> </view> </template> <script> export default { data() { return { imageValue: [], // 存储已选择但未上传的图片路径数组 uploadProgresses: [] // 记录各张照片上传进度的对象集合 }; }, methods: { handleSelectFile(event){ const fileList = event.tempFilePaths; this.imageValue.push(...fileList); }, async uploadFiles(){ let that = this; await Promise.all(this.imageValue.map((path, idx)=>{ return new Promise(resolve=>{ wx.uploadFile({ url: 'https://example.com/upload', // 替换成实际地址 filePath: path, name: 'file', formData:{}, onProgressUpdate(res){ console.log('progress:', res.progress); // 更新对应位置的进度数据 that.$set(that.uploadProgresses[idx], {name:path.split('/').pop(), percent:Number(res.progress)}); if (res.progress >= 100){ resolve(); } } }); }) })); } } }; </script> ``` 上述代码片段展示了如何基于 WeChat Mini Program 平台上使用 `wx.uploadFile()` 方法来进行单次或多批次图像资源提交至远程服务器的过程中加入对传输速率监测的支持。对于其他平台如 HBuilderX 或者纯浏览器环境，则需替换相应的网络通信库（比如 axios），同时注意适配不同环境下可能存在的差异性API调用形式。