小程序图片上传无反应

传送门:

微信公众号如何关联小程序?如何查看小程序原始ID?
https://blog.csdn.net/pang787559613/article/details/106455837

公众号认证?小程序认证?小程序复用公众号资质进行认证?
https://blog.csdn.net/pang787559613/article/details/106455907

小程序被冻结,忘记原始iD,如何找回?
https://blog.csdn.net/pang787559613/article/details/106456041

一、问题:

公司小程序上线有一段时间了,前两天,客户反馈说图片上传不了,马不停蹄找开发定位问题:

1、开了调试模式,连测试环境,真机上传正常;
2、开了调试模式,连线上环境,真机上传正常;
3、关了调试模式,开启预览,连线上环境,问题复现:上传图片,选择了系统相册图片或拍照确认后无反应;

猜想,问题应该在微信方,搜了搜方案试了试,问题解决,记录一下,避免后续踩坑。



二、解决方案:

1、小程序后台配置上传合法域名(设置-开发设置-服务器域名),配置几分钟后即生效:
uploadFile合法域名、downloadFile合法域名

在这里插入图片描述
在这里插入图片描述

官方文档:
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html
在这里插入图片描述

2、在开发阶段,亦可临时开启,跳过域名校验

在微信开发者工具中,可以临时开启 开发环境不校验请求域名、TLS版本及HTTPS证书 选项,跳过服务器域名的校验。此时,在微信开发者工具中及手机开启调试模式时,不会进行服务器域名的校验。

在服务器域名配置成功后,建议开发者关闭此选项进行开发,并在各平台下进行测试,以确认服务器域名配置正确。

如果手机上出现 “打开调试模式可以发出请求,关闭调试模式无法发出请求” 的现象,请确认是否跳过了域名校验,并确认服务器域名和证书配置是否正确。
在这里插入图片描述
在这里插入图片描述

### 微信小程序实现拍照并上传图片功能 #### 图片选择与预览 为了使用户体验更佳,在实际应用中通常会先让用户选择或拍摄一张照片,然后再进行上传操作。通过调用微信提供的API可以轻松完成这一步骤。 ```javascript // 选取图片 chooseImage() { wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success(res) { const tempFilePaths = res.tempFilePaths; console.log(tempFilePaths); this.setData({ imagePath: tempFilePaths }); } }) } ``` 此段代码展示了如何利用`wx.chooseImage()`方法来允许用户从本地相册或是直接使用摄像头获取图片文件路径[^1]。 #### 开启定时拍照功能 对于特定应用场景可能还需要自动间隔一定时间触发一次拍照动作而无需人工干预,则可以通过设置计时器配合调用相应的接口达成目的。 ```javascript startTimerPhotography(intervalTime){ let timerId=setInterval(()=>{ wx.cameraStartPreview(); setTimeout(() => { wx.takePhoto({ quality:'high', success:(res)=>{ clearInterval(timerId); // 停止定时器防止资源浪费 handleUpload(res.tempImagePath); }, fail(err){ console.error('Failed to take photo:', err); } }); }, intervalTime*0.75); // 调整延迟确保预览稳定后再执行拍照 },intervalTime); } ``` 上述函数实现了每隔给定的时间周期就启动一次新的摄影过程,并且在成功获得图像之后立即停止循环以防不必要的消耗[^2]。 #### 处理上传逻辑 当已经获得了待处理的媒体素材后就可以着手准备将其发送至远程服务器保存起来了。这里给出了一种基于ThinkPHP框架的服务端解决方案作为例子说明整个流程: ```javascript function uploadFile(filePath) { wx.uploadFile({ url: 'https://example.com/api/upload', // 替换成自己的服务地址 filePath, name: 'file', formData: { user: 'test' }, header: {'content-type': 'multipart/form-data'}, success (res){ var data = JSON.parse(res.data); if(data.code===200){ console.log("upload succeed"); }else{ console.warn(`error code:${data.code}`); } }, fail(){ console.error('failed'); } }) } ``` 这段脚本里包含了发起HTTP请求的具体参数配置以及针对不同响应情况作出适当反应的方式[^3]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值