广州蓝樾
广州蓝樾
  • 发布:2019-01-21 13:03
  • 更新:2020-12-29 10:40
  • 阅读:2580

【报Bug】手机前端直传图片到阿里oss报错

分类:uni-app

详细问题描述(DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题)
[内容]
使用真机(包含iOS和Andriod)前端直传上阿里oss发生报错。具体参考的是阿里后台服务器签名,然后前端js直接传上阿里oss.在小程序和h5上传图片,采用同样的代码均没有报错。都是成功上传的。后续通过抓包工具发现到错误:首先,阿里oss要求表单域没有指定key,或者放在了表单域file后。在小程序和h5中,表单域file 都是在最后的。但是在真机上面是通过抓包工具是file是放在第一位的,导致最终报错。
在手机型号:huawei-mate10,huawei-magic2,huawei-mate10pro,iPhone-7,Phone-8 均上传失败
重现步骤
[步骤]
下面是上传图片的代码写法,具体逻辑是首先通过访问后台服务器获取到一个policy签名,然后前端把图片上传到阿里oss


                            Apis.oss.createPolicy({  
                                fileName: imgTemp,  
                                randomName: true  
                            }).subscribe(res => {  
                                uni.uploadFile({  
                                    url: self.filePrefix,  
                                    fileType: 'image',  
                                    formData: {  
                                        key: res.key,  
                                        policy: res.policy,  
                                        OSSAccessKeyId: res.ossaccessKeyId,  
                                        signature: res.signature,  
                                        success_action_status: '200'  
                                    },  
                                    name: 'file',  
                                    filePath: img,  
                                    success: function (success) {  
                                        self.addPhotoPath = self.addPhotoPath.concat(res.key);  
                                        self.addTempPhotoPath = self.addPhotoPath.concat(filePath);  
                                    },  
                                    fail: function (err) {  
                                        uni.showToast({  
                                            title: '上传失败,请稍后重试',  
                                            duration: 2000,  
                                            icon: 'none'  
                                        });  
                                    }  
                                });  
                            });  
                        }

[结果]
附件第一张是使用手机上传阿里oss,返回来的错误。
当前我的这边解决做法是提交判断如果是app则提交到后台自己的服务器上传图片

[期望]
附件第二张是通过h5和小程序上传正确的方式。
附件第三种是阿里OSS错误说明的内容

联系方式
[QQ]397038588 或者微信号zjh13612

2019-01-21 13:03 负责人:无 分享
已邀请:
DCloud_UNI_GSQ

DCloud_UNI_GSQ

问题确认已加分,可以先在App平台使用5 API来实现

1***@qq.com

1***@qq.com - 一切皆有可能~

最新版的 HbuilderX
在app端直传 oss 报 403
在微信小程序和支付宝小程序正常
什么原因?

n***@giii.com.cn

n***@giii.com.cn

h5和小程序可以,app上不行,这个问题解决了吗?

DCloud_UNI_GSQ

DCloud_UNI_GSQ

问题已解决,请使用 HBuilderX 1.6 及以上版本

4***@qq.com

4***@qq.com

最新版的 HbuilderX 直传 oss 报 403

taiful

taiful - UNIAPP

我也遇到了,在app端直传 oss 报 403

哈库拉玛塔塔

哈库拉玛塔塔 - 简单又好吃

还没修复 小程序端真机403

  • DCloud_UNI_GSQ

    不使用uni-app的情况下,小程序是否正常

    2020-12-31 20:56

该问题目前已经被锁定, 无法添加新回复