【微信小程序】选择图片并上传时出现两个loading ?!

最新推荐文章于 2024-06-18 14:31:57 发布

abloume

最新推荐文章于 2024-06-18 14:31:57 发布

阅读量1.3k

点赞数 1

分类专栏：微信小程序

本文链接：https://blog.csdn.net/u013451157/article/details/106232733

版权

在微信小程序中，当选择图片并上传时遇到了两次loading弹窗的问题。原本期望只在所有图片上传及绑定完成后显示一个loading，但在选择图片后立即出现了loading。排查后发现，问题出在onShow方法中reload数据时触发了showLoading，加上上传图片时的showLoading，导致了两个loading现象。解决方案是调整onShow中的逻辑，避免在不需要时显示loading。

摘要由CSDN通过智能技术生成

遇到这样一个业务场景，在小程序中 wx.chooseImage 选择图片后，

调用 wx.uploadFile 上传图片到公司的一个数据库中，然后拿到对应的返回值后，

再去请求一个接口，将所有图片一一进行绑定，

等所有图片上传完毕后，最后请求一个接口进行总结汇报。

我们希望的是当选择图片完成后，有一个loading加载中的效果，

然后等所有图片上传完毕并一一绑定，且最后一个总结汇报的接口也请求完毕后，

再隐藏loading弹窗，展示“上传完毕”。

听起来很简单的一个事情，但是我却踩坑了。

先看下大体的代码结构…

// 当前索引值
let i = 0;
// 需要上传的图片总数
let picNum = 0;
// 需要上传的图片路径
let picFilePaths;

// 选择图片
choosePic: function () {
   
	const self = this;
   	wx.chooseImage({
   
      	count: 9,
      	sizeType: ['original', 'compressed'],
      	sourceType: ['album', 'camera'],
      	success: (res) => {
   
          	// 小程序API的限制 文件不能大于20M
          	if (res.size > 20971520) {
   
            	wx.showModal({
   
             	 	title: '上传失败',