uni.uploadFile上传多张图片报错onProgressUpdate of undefined

喵喵喵miao～

已于 2024-04-03 20:54:13 修改

阅读量4.3k

点赞数 3

CC 4.0 BY-SA版权

文章标签： uniapp 微信小程序

于 2024-04-03 20:47:45 首次发布

本文链接：https://blog.csdn.net/XiongFine/article/details/137354221

场景：uniapp开发的小程序需要批量上传多张图片

uniapp 使用uni.uploadFile 上传多张图片
代码块：

//多文件上传
  batchUpLoadFile(url, files, success, fail, progress) {
    var that = this;
    const uploadTask = uni.uploadFile({
      url: url,
      files,//多文件上传使用files
      header: {
        "content-type": "multipart/form-data",
      },
      name: "file",
      success(ret) {
        let json = JSON.parse(ret.data);
        if (json.code == 0) {
          success(json.data);
        } else if (json.code == 100031 || json.code == 100043) {
          uni.hideToast();
        } else {
          fail(json.message);
        }
      },
      fail(err) {
        fail(err);
      }
    });
    uploadTask.onProgressUpdate(res => {
      if (progress) {
        progress(res.progress);
      }
    });
  },

问题：报错 TypeError: Cannot read property ‘onProgressUpdate’ of undefined

图一

console.log(uploadTask) //undefined
uploadTask.onProgressUpdate(res => {
      if (progress) {
        progress(res.progress);
      }
 });
//onProgressUpdate报错
//打印代码中的uploadTask，显示为undefined

再对比uniapp文档发现，文档中有明确提示
在这里插入图片描述

uniapp文档中明确`微信小程序不支持多文件上传`
微信小程序只支持单文件上传，传多个文件需要反复调用本API。所以跨端的写法就是循环调用本API

解决：通过递归的方式调用实现多张上传
代码块：

//封装上传文件代码
batchUpLoadFile(url, filePath, success, fail, progress) {
   var that = this;
   const uploadTask = uni.uploadFile({
     url: url,
     filePath,//多文件上传使用files
     header: {
       "content-type": "multipart/form-data",
     },
     name: "file",
     success(ret) {
       let json = JSON.parse(ret.data);
       if (json.code == 0) {
         success(json.data);
       } else if (json.code == 100031 || json.code == 100043) {
         uni.hideToast();
       } else {
         fail(json.message);
       }
     },
     fail(err) {
       fail(err);
     }
   });
   uploadTask.onProgressUpdate(res => {
     if (progress) {
       progress(res.progress);
     }
   });
 },
 
//页面中调用
uploadimage(type) {
   uni.showToast({
     title: "图片上传中...",
     icon: "loading",
     mask: true,
     duration: 10000
   });
   this.requireimgslist.length <= 0 || (this.requireimgslist.length = 0);
   //this.params.imgslist.slice();//拿到当前所有需要上传的图片
   this.upload(this.params.imgslist.slice(),type);
 },

upload(imgslist,type) {
  main.batchUpLoadFile(url.uploadbytes, imgslist[0], success => {
    imgslist.splice(0, 1);
    this.requireimgslist.push(success)
    if (imgslist.length > 0) {
      this.upload(imgslist);//如果还有图片，继续上传
    } else {
      this.requestUrl(type)//上传完毕执行下一步操作
    }
  }, fail => {
    main.showToast(fail);
  });
},

留下痕迹，并同时提醒自己看文档要仔细奥
祝小伙伴们不踩坑嘻嘻～😊