微信 wx.chooseImage 上传图片 的思考

本文探讨了使用微信API选择图片并尝试直接上传至阿里云OSS的过程。作者最初计划绕过微信的图片上传流程,但发现localId无法直接用于上传,最终还是采用wx.uploadImage方法。
部署运行你感兴趣的模型镜像

开发微信上传图片功能,我的想法是选择图片后,不调用wx.uploadImage上传到微信后台,而是自己组织一下,直接上传到阿里云OSS,因为看到了官方文档到说明localId可以作为img标签的src属性显示图片

wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
    success: function (res) {
    var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
}
});

并不是想象中但样子,这个localId其实就是一个微信自己定义的HASH变量,例如wxlocalresource://imageid987654321123456789,在微信浏览器中,它会自动解析成对应的图片,所以我想通过localId直接进行上传的想法破灭,还是乖乖的用wx.uploadImage方法吧。

您可能感兴趣的与本文相关的镜像

GPT-oss:20b

GPT-oss:20b

图文对话
Gpt-oss

GPT OSS 是OpenAI 推出的重量级开放模型,面向强推理、智能体任务以及多样化开发场景

const recorderManager = wx.getRecorderManager(); const innerAudioContext = wx.createInnerAudioContext(); Page({ data: { messages: [], inputMessage: '', scrollToView: '', isRecording: false, recordStartTime: 0, }, onLoad() { this.initMessages(); this.setupRecorderEvents(); }, initMessages() { this.setData({ messages: [ { role: 'assistant', content: '您好!我是您的 AI 助手,请问有什么可以帮助您?' } ] }); }, setupRecorderEvents() { recorderManager.onStop((res) => { const tempFilePath = res.tempFilePath; this.sendVoiceMessage(tempFilePath); }); recorderManager.onError((err) => { console.error('录音失败', err); }); }, onInput(e) { this.setData({ inputMessage: e.detail.value }); }, async onSend() { const content = this.data.inputMessage.trim(); if (!content) return; const userMessage = { role: 'user', content: content }; const newMessages = [...this.data.messages, userMessage]; this.setData({ messages: newMessages, inputMessage: '', // 清空输入框 scrollToView: `msg-${newMessages.length - 1}` }); await this.sendToServer(newMessages); }, async chooseImage() { try { const result = await wx.chooseImage({ count: 1, sizeType: ['compressed'], sourceType: ['album', 'camera'] }); const tempFilePath = result.tempFilePaths[0]; const base64 = await this.getBase64FromFile(tempFilePath); const imageMessage = { role: 'user', type: 'image', content: base64 }; const newMessages = [...this.data.messages, imageMessage]; this.setData({ messages: newMessages, scrollToView: `msg-${newMessages.length - 1}` }); await this.sendToServer(newMessages); } catch (e) { console.error('选择图片失败', e); } }, getBase64FromFile(filePath) { return new Promise((resolve, reject) => { wx.getFileSystemManager().readFile({ filePath, encoding: 'base64', success: res => resolve(`data:image/jpeg;base64,${res.data}`), fail: reject }); }); }, startRecord() { this.setData({ isRecording: true, recordStartTime: Date.now() }); recorderManager.start({ duration: 60000, sampleRate: 16000, numberOfChannels: 1, encodeBitRate: 96000, format: 'mp3' }); }, endRecord() { if (!this.data.isRecording) return; this.setData({ isRecording: false }); recorderManager.stop(); }, sendVoiceMessage(tempFilePath) { const voiceMessage = { role: 'user', type: 'voice', content: tempFilePath }; const newMessages = [...this.data.messages, voiceMessage]; this.setData({ messages: newMessages, scrollToView: `msg-${newMessages.length - 1}` }); this.sendToServer(newMessages); }, async sendToServer(messages) { const loadingMessage = { role: 'assistant', content: '', loading: true }; const newMessages = [...messages, loadingMessage]; this.setData({ messages: newMessages, scrollToView: `msg-${newMessages.length - 1}` }); try { const response = await wx.request({ url: 'http://localhost:3000/chat', method: 'POST', { messages }, // 正确的数据传递方式 header: { 'Content-Type': 'application/json' } }); const assistantMessage = response.data.message; newMessages.pop(); newMessages.push({ role: 'assistant', content: assistantMessage }); this.setData({ messages: newMessages, scrollToView: `msg-${newMessages.length - 1}` }); } catch (error) { console.error('发送消息失败', error); } }, playVoice(filePath) { innerAudioContext.src = filePath; innerAudioContext.play(); } });
最新发布
08-30
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值