【表象】:微信小程序端 上传图片后,浏览发现 图片完全不对(图片被灰色遮罩住了 百分百必现--> 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请求,直接请求腾讯云,把文件上传至腾讯云)
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、再次恳请支持,人人为我,我为人人。
检查思路,小程序上传后,在腾讯后台看看图片是否正确?然后再下载下来,看看图片是否正确?在小程序端,检查下载地址,打印日志
另外,这3次交互,从日志上看 没有任何error
那就是上传出了问题,1,你可以上传到服务器,看看图片是否正确,排除小程序端api问题 2,如果没有问题,找腾讯oss客服排查
搜豆子工具小程序,有个图片格式转换,你上传你的照片,看有没有阴影,这样就不用你服务端给你写接口了
如果没有问题,就给你后端没有关系了,解决小程序端代码就行
推测还是你小程序端上传代码有问题,看看参数是不是传错了
对于我来排查问题,没用的信息太多。
小程序callContainer方式-->云托管部署的后端api接口 这段代码看一下
先排查是否小程序端是否有灰色蒙层或者特殊css导致的变色
问题已解决~
原因:第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