7***@qq.com
7***@qq.com
  • 发布:2023-12-18 09:22
  • 更新:2023-12-19 11:10
  • 阅读:197

【报Bug】开启uni.showLoading后执行获取token和文件上传功能时慢速网络切别的网络导致一直转圈无法正常执行请求成功或失败

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

手机系统: 全部

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: CLI

CLI版本号: 2.0.2-3090820231124001

测试过的手机:

荣耀Play5,小米8,华为P30 Pro,OPPO R17,华为畅享10 plus,华为P30

示例代码:
//开启转圈  
uni.showLoading({  
            title: "上传中...",  
            mask: true,  
          });  

//获取token及上传文件方法  
// 获取文件管理签名token  
UCloudUFile.prototype.getUFileToken = function (options, success, error) {  
  var method = options.method || "GET";  
  var file = options.file || {};  
  var fileName = options.fileName;  
  var md5Required = options.md5Required;  

  var keyName;  
  var contentType = options.contentType || file.type || "";  
  var putPolicy = options.putPolicy || "";  

  keyName = fileName;  

  var that = this;  

  var token = "";  

  // 服务端签名计算  
  function getSignatureToken(  
    tokenServerUrl,  
    method,  
    bucket,  
    key,  
    content_md5,  
    content_type,  
    date,  
    put_policy  
  ) {  
    var url =  
      tokenServerUrl +  
      "?method=" +  
      method +  
      "&bucket=" +  
      bucket +  
      "&key=" +  
      key +  
      "&content_md5=" +  
      content_md5 +  
      "&content_type=" +  
      content_type +  
      "&date=" +  
      date +  
      "&put_policy=" +  
      Base64.encode(put_policy);  

    var reqData = appendExtraParam(tokenServerUrl, {});  

    uni.request({  
      url: url,  
      method: "POST",  
      header: requestFormHeader(),  
      data: reqData,  
      success: (resp) => {  
        success(resp.data.trim());  
      },  
      fail: (resp) => {  
        error("UFile token 获取失败");  
      },  
      complete: (resp) => {  
        //  
      },  
    });  
  }  
this.getUFileToken(  
    requestToken,  
    function (token) {  
      var url = that.getBucketUrl() + encodeURIComponent(fileName);  

      uni.uploadFile({  
        url: url,  
        header: {  
          "Content-MD5": "",  
        },  
        filePath: file,  
        name: "file",  
        formData: {  
          FileName: fileName,  
          Authorization: token,  
        },  
        success: (resp) => {  
          if (resp.statusCode === 200) {  
            success({  
              fileName: fileName,  
            });  
          }  
          // success(resp)  

          console.log("成功上传", resp);  
        },  
        fail: (resp) => {  
          error({  
            fileName: fileName,  
          });  
          console.log("上传失败", resp);  
        },  
      });  
    },  
    function (error) {}  
  );  
};  

//调用token及上传方法后关闭loading  
this.ufile.batchUpload(  
          waitFilesUFile,  
          async (resp) => {  
            uni.hideLoading();  

            console.log("batchUpload resp", resp);  

            // 这里校验上传之前的图片数量和上传之后图片数量是否一致 TODO  

            let successFiles = [];  
            let fileNames = "";  
            // 假设一致  
            for (let i = 0; i < resp.length; i++) {  
              fileNames += resp[i].fileName + ",";  

              successFiles.push({  
                fileName: resp[i].fileName,  
                fullPath: "",  
                thumbFullPath: "",  
                shouldReUpload: false,  
              });  
            }  

            //  
            const responseBody = await fetchMakePrivateUrl({  
              fileNames: fileNames,  
            });  
            if (!responseBody) {  
              return;  
            }  

            console.log("responseBody", responseBody);  

            for (let i = 0; i < successFiles.length; i++) {  
              successFiles[i] = responseBody.data[i];  
            }  

            console.log("successFiles", successFiles);  

            this.handleUploadResult(200, successFiles, fromType, fromIndex);  
          },  
          (resp) => {  
            uni.hideLoading();  

            uni.showModal({  
              title: "",  
              content: "图片上传失败:" + JSON.stringify(resp),  
            });  
            console.log("上传失败", resp);  
          },  
          (progress) => {  
            console.log("progress", progress);  

            if (progress === 1) {  
              uni.hideLoading();  
            } else {  
              this.progressCent = "上传中...";  
            }  
          }  
        );

操作步骤:

执行showLoading后,执行获取token上传文件途中,慢速网络切别的网络

预期结果:

执行上传成功或失败的逻辑,关闭loading

实际结果:

一直转圈

bug描述:

上传文件之前我们开启loading转圈,然后调用token并上传文件,对于上传成功和失败都做了相应的逻辑并关闭loading。如果上传途中慢速网络切别的网络会导致一直转圈无法执行成功和失败的相应逻辑。在最外层我们包裹了try catch,也无法捕获到异常。

2023-12-18 09:22 负责人:DCloud_uniCloud_VK 分享
已邀请:
DCloud_uniCloud_VK

DCloud_uniCloud_VK

监听下上传进度, 看是否还在上传只是上传比较慢, 如果还是正在上传的过程中, 那肯定不会执行关闭loading

  • 7***@qq.com (作者)

    用哪个方法可以监听到上传进度

    2023-12-19 14:02

  • y***@jiayuxiangmei.com

    回复 7***@qq.com: onProgressUpdate

    2023-12-19 14:36

  • DCloud_uniCloud_VK

    回复 y***@jiayuxiangmei.com: 文档上有 文档

    2023-12-19 14:38

  • 7***@qq.com (作者)

    回复 DCloud_uniCloud_VK: ```javascript

    this.ufile.batchUpload(

    waitFilesUFile,

    async (resp) => {

    uni.hideLoading();


            console.log("batchUpload resp", resp);  


    方法内监听到上传进度是100,success回调里也正常走了。外头调用的地方hideLoading都没走(代码见示例)

    2023-12-20 14:11

要回复问题请先登录注册