给钉钉小程序提供图片上传下载接口遇到的坑

本文记录了在使用安卓和苹果设备进行小程序开发时遇到的问题,包括上传图片接口不带cookie、下载图片接口行为差异及苹果真机无法进行局域网调试等问题,并提供了相应的解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

postman调了没问题
模拟器调了没问题
到了真机上就各种问题
苹果和安卓竟然还是不同的问题

问题一:调上传图片接口竟然不带cookie?

苹果没有问题
安卓调上传接口莫得cookie信息,导致过不了认证,只得先将上传接口加了白名单

问题二:下载图片接口苹果行,安卓不行

下载图片的时候老是获取不到图片,而用浏览器访问没问题,postman和苹果也没问题,要么报406,要么提示

error:12 errorMessage:"response is unsuccessful: response get error content type!"

后来发现是因为当图片不存在时返回了一个html,导致小程序解析错误报406

而另外一个12错误码则是因为响应头设置不正确导致的。
刚开始设置的是application/octet-stream ,安卓上不行。
后来改成了根据图片类型设置对应的content-type,
mage/gif :gif图片格式
image/jpeg :jpg图片格式
image/png:png图片格式
设置完成之后安卓也能成功访问了。

问题三:苹果不能局域网真机调试

暂时莫得办法,用安卓机能够直接编译测试,能够连上在同一局域网的服务器,而苹果就死活不行,也是搞不懂了。

暂时就列这么多,日后遇到了继续补充。

⼩程序下载⽂件并预览 需求分析 最近优化了个原先写过的需求,回头复习复习⼩程序的 API 是这样的,我需要下载⼀个⽂件并打开此⽂件 优化:记录是否被下载过,如果下载过就直接打开 获取⽂件下载链接,打开⽂件 wx.downloadFile({ url: `${pic.meetingUrl}/weixin/noticeStart/downLoad/${this.selectItem.recordId}`, // 下载资源的 url success: (res) => { wx.openDocument({ filePath: res.tempFilePath, // ⽂件路径,可通过 downloadFile 获得, fileType: 'pdf', // 写下载后的⽂件的格式,这⾥距离是pdf success: (res) => { }, fail: (error) => { }, }); }, fail: () => {}, complete: () => {}, }); 优化 思路:保存下载后的⽂件,保存其路径到本地缓存,然后下次打开的时候判断⼀下本地缓存⾥是否有,如果有就打开,本地缓存没有的话, 就先下载在打开。 const that = this; const cacheFilePath = wx.getStorageSync( `filePath-${this.selectItem.recordId}` ); // 先判断这个⽂件是否下载过 // 如果下载过,尝试通过缓存,打开⽂件 // 否则就要下载下载成功后保存本地缓存(临时路径信息),命名规则为 filePath + recordId if (cacheFilePath) { wx.openDocument({ filePath: cacheFilePath, //⽂件路径,可通过 downFile 获得, fileType: this.selectItem.fileType, // 获取⽂件格式 success: (res) => { }, fail: (error) => { }, }); } else { wx.showLoading({ title: "下载中", mask: true, }); wx.downloadFile({ url: `${pic.meetingUrl}/weixin/noticeStart/downLoad/${this.selectItem.recordId}`, // 下载资源的 url success: (res) => { // 隐藏 loading wx.hideLoading(); // 下载成功后,保存⽂件路径到本地缓存 wx.setStorageSync( `filePath-${this.selectItem.recordId}`, `${res.tempFilePath}` ); // 尝试打开下载后的⽂件 wx.openDocument({ filePath: res.tempFilePath, //⽂件路径,可通过 downFile 获得, fileType: this.selectItem.fileType, // 获取⽂件格式 success: (res) => { }, fail: (error) => { }, }); }, fail: () => {}, complete: () => {}, }); }
### 关于钉钉小程序图片上传后预览出现黑屏的问题 针对钉钉小程序中上传图片之后预览显示为黑色屏幕的情况,通常这类问题可能由多种因素引起。考虑到TIS平台的核心特性在于其简单易用、扩展性强以及基于白屏化操作的设计理念[^1],虽然这些特点主要适用于ETL工具领域,但对于理解并解决复杂的应用程序行为仍然具有一定的启发意义。 对于具体的技术实现方面,当处理图像资源时,确保所使用的API调用正确无误至关重要。如果是在开发过程中遇到了此类情况,建议检查以下几个常见原因: - **路径配置错误**:确认返回给前端用于展示的URL是否准确指向了实际存储位置。 - **权限设置不当**:验证服务器端是否有足够的读取权限来访问该文件,并且客户端也具备相应的网络请求权限。 - **跨域资源共享(CORS)**:如果是通过CDN或者其他域名加载,则需注意CORS策略可能导致浏览器阻止加载外部资源。 - **缓存机制干扰**:有时旧版本的数据可能会被浏览器缓存下来,在这种情况下尝试清除应用缓存或者强制刷新页面查看效果如何。 另外值得注意的是HBuilderX作为一款集成开发环境提供了丰富的调试功能可以帮助定位问题所在[^2]。利用其中的日志记录、断点调试等功能能够更高效地排查代码逻辑上的潜在缺陷。 ```javascript // 示例代码片段:获取图片链接并设置到img标签src属性上 const imgElement = document.createElement('img'); fetch('/api/getImageUrl') .then(response => response.json()) .then(data => { const imageUrl = data.url; imgElement.src = imageUrl; // 确认此url能正常访问 }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值