uniapp 微信小程序,支付宝小程序 uni.chooseImage()选择照片上传uni.uploadfile()解决错误码429等上传问题

在使用uniapp开发事,使用uni.chooseImage,uni.uploadFile()
上传照片时,发现在支付宝端如果选择照片为缩略图,则无法正常上传,上传直接报错:statusCode:429,上传失败,(后端接口对图片后缀有校验)

uni.chooseImage({


})
uni.upoloadFile({
})

在网上看到需要将uploadfile api中的header{content-Type设置为application/x-www-form-urlencoded;charset=utf-8}
设置好后,再试,发现确实可以上传了,但是仅仅安卓手机端可以上传,苹果手机端无法上传。
最后在后端支持下发现通过uni.chooseImage选择的照片后缀都被转成了大写,因此后端接口的后缀与上传报文中的文件后缀发生冲突,导致文件格式不一致,上传失败
最后通过限制用户只能通过选择原图,并且在uni.uploadFile上传图片是,接口后缀分微信和支付宝,在细分条件安卓和苹果解决了此问题

在使用 Vue 或 UniApp 开发应用时,可以利用 uni-app 的 API uni.chooseImageuni.uploadFile 来实现图片的上传和更换。下面是具体的实现步骤和代码示例: 1. 使用 uni.chooseImage 选择图片: 该方法可以弹出图片选择器,用户可以选择本地相册中的图片,或者使用相机拍摄新图片。选择图片后,会返回图片的本地文件路径。 ```javascript uni.chooseImage({ count: 1, // 默认选择1张图片 sizeType: ['compressed'], // 可以指定选择大图还是小图 sourceType: ['album', 'camera'], // 可以选择相册或相机 success: (res) => { // 处理用户选择的图片 const tempFilePaths = res.tempFilePaths; // 将图片路径保存,以便上传 this.selectedImage = tempFilePaths[0]; }, fail: (err) => { // 处理错误情况 console.error(err); } }); ``` 2. 使用 uni.uploadFile 上传图片: 得到图片的本地文件路径后,使用 uni.uploadFile 方法将图片上传到服务器。该方法会返回一个上传任务 ID,可以通过这个 ID 监听上传进度和上传成功后的状态。 ```javascript uni.uploadFile({ url: '服务器上传接口', // 上传图片到服务器的接口地址 filePath: this.selectedImage, // 本地图片路径 name: 'file', // 上传时的文件名 success: (uploadRes) => { // 上传成功的回调函数 const data = JSON.parse(uploadRes.data); // 处理返回的数据,比如更新UI显示上传成功的图片等 console.log('上传结果', data); }, fail: (err) => { // 上传失败的回调函数 console.error('上传失败', err); } }); ``` 请注意,上传图片到服务器通常需要处理跨域问题,确保服务器端设置允许来自客户端的请求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前后端杂货铺

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值