首页/ 填坑/ 文章详情

微信小程序 API wx.uploadFile 官方示例:坑你没商量

微信小程序一经面世后,瞬间掀起一股学习小程序的热潮。落后就要挨打,前端也需要与时俱进。随着时间的推移,小程序成了必备技能点,时代倒逼着你前进。

新的事物出现伴随着机遇与挑战,学习新的技能总不会一帆风顺,然而官方挖坑,最为致命。客官们,来看看微信小程序 API wx.uploadFile 大型翻车现场。

微信小程序 wx.uploadFile 官方示例代码:

JSwx.chooseImage({
  success (res) {
    const tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        'user': 'test'
      },
      success (res){
        const data = res.data
        //do something
      }
    })
  }
})

用户参照官方代码选择文件上传,文件上传失败之后,没有任何的信息反馈,此时不用说萌新小白一脸懵B,有经验的也觉的莫名其妙。为了获取错误信息,需要额外添加 fail 对象函数。

JSwx.chooseImage({
  success (res) {
    const tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        'user': 'test'
      },
      success (res){
        const data = res.data
        //do something
      },
      fail(res) { 
          console.log(res); //输出错误的信息
      }
    })
  }
}) 

重新运行代码,获得如下错误信息:

JS{errMsg: "uploadFile:fail parameter error: parameter.filePath should be String instead of Object;"}

根据错误信息的提示,parameter.filePath 需要字符串类型的参数,不是 Object 对象参数。于是将tempFilePaths[0] 改成 JSON.stringify(tempFilePaths[0]) 强制转换成字符串。

JS{errMsg: "uploadFile:fail createUploadTask:fail file not found"}

上传文件还是上传失败,继续提示,文件没有找到。翻看微信小程序文档参数的 filePath 讲解。

filePath 要上传文件资源的路径 (本地路径)

filePath 参数要的是上传文件的路径,文件的路径,文件的路径!!! filePath 需要的参数应该是tempFilePaths[0].path参数。

JSwx.chooseImage({
  success (res) {
    const tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址
      filePath: tempFilePaths[0].path,
      name: 'file',
      formData: {
        'user': 'test'
      },
      success (res){
        const data = res.data
        //do something
      },
      fail(res) { 
          console.log(res); //输出错误的信息
      }
    })
  }
})

微信小程序文档写的清清楚楚,官方示例代码却使用错误的参数,这是为什么呢?在接触uni-app前,先入为主认为微信小程序是行业内的制定者。其实不然,DCloud才是这个行业的开创者,只是微信小程序名声过于响亮,误会了。

官方示例代码发生这么低级的错误,有可能微信小程序同学抄作业,无封不动照抄,事后换了wx的马甲,事情就这么简单。

参考资料:

uni-app的由来
uni-app uni.uploadFile 文档
微信小程序 wx.uploadFile 文档 

文章评论0 records

最新 最早

0

最新评论Latest comments

凡心的仙人凡心的仙人 昨天 14:35
谢谢你了!
rantrismrantrism 2023-04-03 11:27
您好~我是腾讯云开发者社区运营,关注了您分享的技术文章,觉得内容很棒,我们诚挚邀请您加入腾讯云自媒体分享计划。完整福利和申请地址请见:https://cloud.tencent.com/developer/support-plan 作者申
唐牛才是食神唐牛才是食神 2022-06-15 10:51
(*°▽°*)八(*°▽°*)♪,解决了
唐牛才是食神唐牛才是食神 2022-06-15 10:49
发现不得了的东西,今晚回去好好研究下...
胖螺胖螺 2022-02-04 00:58
( ゜- ゜)つロ 在写了在写了。看到也有些感慨。因为站长前年在我原博客的留言,让我毅然选择去深造,选择读研,曾经我想过挺多东西的,还是自己本专业的适合我自己。在这先表达感谢。新年快乐!