微信小程序上传文件 chooseMessageFile uploadFile，添加loading显示异常

最新推荐文章于 2025-08-01 14:20:38 发布

原创最新推荐文章于 2025-08-01 14:20:38 发布 · 4.7k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

小程序专栏收录该内容

18 篇文章

订阅专栏

在uniapp的小程序开发中，遇到chooseMessageFile选择文件后，loading立即消失的问题。原因是chooseMessageFile回调导致页面刷新，中断了loading的显示。为了解决这个问题，开发者在启动loading时添加了500毫秒的延时，确保loading在文件上传成功后才关闭。这样实现了在文件上传过程中展示loading的效果。

开发环境：uniapp vue2.0

开发背景：小程序中使用了chooseMessageFile，选中聊天记录中的文件之后调用uploadFile进行上传，本想在调用chooseMessageFile 之前添加loading,在上传成功后在隐藏loading。实际是直接点击选择文件那一下，loading就迅速消失了，没有等上传成功后再消失。

问题原因：调用chooseMessageFile时候，选中文件返回时候，页面进程被中断了，导致loading直接就消失了。

解决办法：在启动loading时候加个延迟，这样就能完美解决了

		updateResume() {
				const that = this;
				this.loading = true;
				wx.chooseMessageFile({
					type: 'file',
					count: 1,
					extension: ['doc', 'docx', 'pdf', 'png', 'jpg', 'xlsx', 'xls'],
					success(res) {
						console.log('msgfile', res);
						// 处理loading过快消失的bug，可能和微信执行的顺序有关，打开上传文件会刷新页面
						setTimeout(() => {
							uni.showLoading({
								title: '简历上传中...',
								mask: true
							})
						}, 500)
						console.log('that.$u.api.getUploadCVFileUr', that.$u.api.getUploadCVFileUr);
						wx.uploadFile({
							url: that.$u.api.getUploadCVFileUrl,
							//url: 'https://25y.newland.com.cn/test/recruit/api/RecruitingTalentCv/uploadCVFile', //仅为示例，非真实的接口地址 该接口返回的的JSON
							filePath: res.tempFiles[0].path,
							name: "file",
							header: {
								"content-type": "application/x-www-form-urlencoded",
								xToken: that.$store.state.vuex_token
							},
							formData: {
								type: 'common'
							},
							success(data) {
								// 微信返回的数据被转成string
								const curData = JSON.parse(data.data);
								if (curData.code === 200) {
									that.form.lastCV.cvUrl = JSON.parse(data.data).result.path;
									that.form.lastCV.cvName = res.tempFiles[0].name;
									that.form.lastCV.cvSize = (res.tempFiles[0].size / 1024).toFixed(2);
								} else {
									that.$u.toast(decodeURIComponent(curData.msg), 3000);
								}
								uni.hideLoading();
								// uni.hideLoading();
							},
							fail(err) {
								uni.hideLoading();
							}

						})
					},
					fail(err) {
						uni.hideLoading();
					}
				})
			},