收藏
回答

小程序使用“上传文件”后,拿到的访问链接,图片完全被灰色遮罩住了,悬赏如何解决?(解决后大h包感谢)

【表象】:微信小程序端 上传图片后,浏览发现 图片完全不对(图片被灰色遮罩住了 百分百必现-->  https://7072-prod-5gxnj9yf4701217e-1325415685.tcb.qcloud.la/gaint/gen/2024/5/10001_202451014852711.jpg

具体问题演示,请参看视频



【整个上传处理过程】:

1、获取文件上传链接(调用链路:小程序callContainer方式-->云托管部署的后端api接口-->微信“获取文件上传链接”接口https://api.weixin.qq.com/tcb/uploadfile

“获取文件上传链接”接口文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloudrun/src/development/storage/service/upload.html(获取文件上传链接部分)


2、上传文件(小程序端 根据1返回的结果 封装好参数 发起post请求,直接请求腾讯云,把文件上传至腾讯云)

“上传文件”接口文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloudrun/src/development/storage/service/upload.html


3、获取文件下载地址(调用链路:小程序callContainer方式-->云托管部署的后端api接口-->微信“获取文件下载地址”接口https://api.weixin.qq.com/tcb/batchdownloadfile

“获取文件下载地址”接口文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloudrun/src/development/storage/service/download.html


【配置情况】

1、在小程序mp设置服务器域名

2、修改隐私保护协议(已审核通过)


【其他重要信息】:

1、前端使用uniapp开发,微信小程序端(无论是体验版、正式版打开调试模式与否),一直会这个问题,但Android端上传图片一切正常。匪夷所思。。。

2、排查已久,未寻得解决办法。悬赏不低于200 恳求帮助(可提供前端代码)

3、再次恳请支持,人人为我,我为人人。



回答关注问题邀请回答
收藏

4 个回答

  • 神经蛙
    神经蛙
    发表于小程序端
    05-11

    检查思路,小程序上传后,在腾讯后台看看图片是否正确?然后再下载下来,看看图片是否正确?在小程序端,检查下载地址,打印日志

    05-11
    有用 1
    回复 7
    • 张志杰
      张志杰
      05-11
      嗯嗯,腾讯后台的图片链接 用浏览器打开就是不正确的  https://7072-prod-5gxnj9yf4701217e-1325415685.tcb.qcloud.la/gaint/gen/2024/5/10001_202451014852711.jpg


      另外,这3次交互,从日志上看 没有任何error
      05-11
      回复
    • 神经蛙
      神经蛙
      发表于小程序端
      05-11回复张志杰

      那就是上传出了问题,1,你可以上传到服务器,看看图片是否正确,排除小程序端api问题 2,如果没有问题,找腾讯oss客服排查

      05-11
      回复
    • 神经蛙
      神经蛙
      发表于小程序端
      05-11回复张志杰

      搜豆子工具小程序,有个图片格式转换,你上传你的照片,看有没有阴影,这样就不用你服务端给你写接口了

      05-11
      回复
    • 神经蛙
      神经蛙
      发表于小程序端
      05-11回复张志杰

      如果没有问题,就给你后端没有关系了,解决小程序端代码就行

      05-11
      回复
    • 神经蛙
      神经蛙
      发表于小程序端
      05-11回复张志杰

      推测还是你小程序端上传代码有问题,看看参数是不是传错了

      05-11
      回复
    查看更多(2)
  • Mr.Zhao
    Mr.Zhao
    05-10

    对于我来排查问题,没用的信息太多。

    小程序callContainer方式-->云托管部署的后端api接口 这段代码看一下

    05-10
    有用 1
    回复 6
    • 张志杰
      张志杰
      05-10
      辛苦看下图片,贴代码 都转义了
      05-10
      回复
    • Mr.Zhao
      Mr.Zhao
      05-10回复张志杰
      callContainer 代码在哪呢?
      05-10
      回复
    • Mr.Zhao
      Mr.Zhao
      发表于移动端
      05-11回复张志杰
      代码呢?
      05-11
      回复
    • 张志杰
      张志杰
      05-11回复Mr.Zhao
      05-11
      回复
    • Mr.Zhao
      Mr.Zhao
      发表于移动端
      05-11回复张志杰
      这个跟上传有啥关系,讲解一下,我建议你用最少得代码去复现问题,不要在你这个工程里面写,整个空白项目
      05-11
      回复
    查看更多(1)
  • dreamhunter
    dreamhunter
    05-11

    先排查是否小程序端是否有灰色蒙层或者特殊css导致的变色

    05-11
    有用
    回复 1
    • Mr.Zhao
      Mr.Zhao
      发表于移动端
      05-11
      小程序样式问题也不会影响到浏览器访问也是灰色吧
      05-11
      回复
  • 张志杰
    张志杰
    05-10

    问题已解决~

    原因:第2步上传文件,封装formData多写了个 file参数导致(详看下图)

    解决办法:删掉file即可(额,这么简单。。。)

    原因分析(猜测 不感兴趣可跳过 本身就是多传了参 按规范传对即可)

    uni.uploadFile调到的原生wx.uploadFile(两个方法的入参名完全一致),底层通过filePath读取文件流,并将文件流对象命名为file,携带上formData对象 传输至url进行接口交互。url服务端 拿到的file、user是平级的

    (图片来自官方wx.upload方法:https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html

    接下里就到混淆视听的地方了,使用这个api,都会把file参数 跟其他参数 一起同级传递

    (图片来自官方 各端上传对象存储方法:https://developers.weixin.qq.com/miniprogram/dev/wxcloudrun/src/development/storage/service/upload.html

    所以,很容易写成:

    至于上传后 浏览图片 除了最上面正常 下面全部被灰色遮罩,应该是 wx.upload方法底层读取到了混乱的文件流,进而把错误流写到了对象存储


    建议:根上的原因前端开发理解不到位、官方api参数校验不充分:

    1、@官方:wx.uploadFile方法增加校验,不允许name值(eg. “file”)当做key,存在于formData中

    2、@前端开发同学:理解name:'file'作用,应该就不会再放到formData中了

    3、对于问题的复现:@Mr.Zhao 思路一直很清晰:空白工程调原生api、使用uniapp组件调

    其api,进行一步步复现,直至发现file参数问题


    最后:

    感谢@dreamhunter @神经蛙 @Mr.Zhao 贡献排查思路、不吝赐教(悬赏已兑现)


    PS.

    打个-广-告:我是后端开发(WX:18500185916),10年互联网老兵,承接小程序从0-1建设,也可单独承接后端。近期项目情况:https://kdocs.cn/l/cbv056KOGMSr

    05-10
    有用
    回复
登录 后发表内容