uni-app转成微信小程序上传图片回显

时间: 2023-09-29 14:05:51 浏览: 39
要在微信小程序中上传图片并回显,你可以使用微信小程序的 API `wx.chooseImage` 和 `wx.uploadFile`。 1. 首先,在页面中引入 `wx.chooseImage` API: ``` // uni-app 中引入微信小程序 API 的方式 import weixin from '@/utils/weixin.js'; // 在 methods 中添加以下代码 chooseImage() { weixin.chooseImage({ count: 1, // 最多可以选择的图片张数,默认1 sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有 sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有 success: res => { // 选择成功后,将图片路径保存到 data 中 this.setData({ imgUrl: res.tempFilePaths[0] }); }, fail: err => { console.log(err) } }); }, ``` 2. 然后,在 `wx.uploadFile` 中上传图片: ``` uploadImage() { const url = 'http://example.com/upload'; // 上传图片的接口地址 const filePath = this.data.imgUrl; // 图片路径 wx.uploadFile({ url, filePath, name: 'file', formData: { // 其他参数 }, success: res => { // 上传成功后,将图片地址保存到 data 中 const data = JSON.parse(res.data); this.setData({ imgUrl: data.url }); }, fail: err => { console.log(err) } }); }, ``` 3. 最后,在页面中显示图片: ``` <image :src="imgUrl"></image> ``` 这样,当用户选择图片并上传成功后,图片就会在页面中显示出来。

相关推荐

在微信小程序中,字符串含中文转base64可以使用以下代码实现: javascript // 将字符串转成UTF-8编码的ArrayBuffer function str2ab(str) { let buf = new ArrayBuffer(str.length * 2); // 每个字符占用2个字节 let bufView = new Uint16Array(buf); for (let i = 0, strLen = str.length; i < strLen; i++) { bufView[i] = str.charCodeAt(i); } return buf; } // 将ArrayBuffer转成base64字符串 function ab2base64(arrayBuffer) { let base64 = wx.arrayBufferToBase64(arrayBuffer); return base64; } // 示例 let str = "你好,世界!"; let arrayBuffer = str2ab(str); let base64 = ab2base64(arrayBuffer); console.log(base64); // 5L2g5aW977yM5LiW55WM77yB 要注意,在字符串含有中文等非ASCII字符时,必须将字符串转成UTF-8编码的ArrayBuffer,否则会出现乱码。 而base64回显中文,则需要将base64字符串转回原始字符串,方法如下: javascript // 将base64字符串转成ArrayBuffer function base642ab(base64) { let arrayBuffer = wx.base64ToArrayBuffer(base64); return arrayBuffer; } // 将ArrayBuffer转成字符串 function ab2str(arrayBuffer) { let decoder = new TextDecoder("utf-8"); let str = decoder.decode(arrayBuffer); return str; } // 示例 let base64 = "5L2g5aW977yM5LiW55WM77yB"; let arrayBuffer = base642ab(base64); let str = ab2str(arrayBuffer); console.log(str); // 你好,世界! 同样需要注意,在base64字符串含有中文等非ASCII字符时,必须将base64字符串转成UTF-8编码的ArrayBuffer。

最新推荐

300620光库科技财务报告资产负债利润现金流量表企业治理结构股票交易研发创新等1391个指标(2014-2022).xlsx

300620光库科技财务报告资产负债利润现金流量表企业治理结构股票交易研发创新等1391个指标(2014-2022)

300708聚灿光电财务报告资产负债利润现金流量表企业治理结构股票交易研发创新等1391个指标(2014-2022).xlsx

300708聚灿光电财务报告资产负债利润现金流量表企业治理结构股票交易研发创新等1391个指标(2014-2022)

BES TWS蓝牙耳机开发培训课件.pdf

BES TWS蓝牙耳机开发培训课件.pdf BES TWS 蓝牙耳机开发培训课件 企业研发一线高级工程师编写的培训课件,涉及2300,到2700最新的SDK SOC 目录 一 BES SOC 摘要介绍-----------------------------------------------------------2 二 开发平台搭建---------------------------------------------------------------5 三 烧录方式-------------------------------------------------------------------9 四 BES 数字音频接口技术与应用------------------------------------------------13

ssm数据结构课程网络学习平台的+vue毕业论文.doc

ssm数据结构课程网络学习平台的+vue毕业论文.doc

管理建模和仿真的文件

管理Boualem Benatallah引用此版本:布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学,1996年。法语。NNT:电话:00345357HAL ID:电话:00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆,用于存放和传播科学研究论文,无论它们是否被公开。论文可以来自法国或国外的教学和研究机构,也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire

Objective-C中的协议与代理设计模式介绍

# 1. 理解Objective-C中的协议 协议是Objective-C中一种很重要的特性,它类似于其他编程语言中的接口,用来定义对象之间的通信规则和行为约定。在Objective-C中,协议可以帮助实现对象之间的松耦合和重用性。让我们深入了解Objective-C中的协议。 ## 1.1 什么是Objective-C中的协议? 在Objective-C中,协议是一组方法的声明,定义了一个对象可以遵循的接口。协议本身并不实现任何方法,而是规定遵循该协议的类需要实现协议中定义的方法。通过协议,可以在不同的类之间定义一组公共的行为和方法。 ## 1.2 协议的声明和使用方法 在Ob

编写求n!的函数f(int n),在主函数中输入两个整数m、n,然后调用函数求: C=m!/n!(m -n)!

好的,我可以编写这个函数。以下是代码示例: ```c++ #include <iostream> using namespace std; int f(int n) { if (n <= 1) { return 1; } else { return n * f(n - 1); } } int main() { int m, n; cout << "请输入两个整数m和n,以空格分隔:" << endl; cin >> m >> n; int C = f(m) / (f(n) * f(m - n));

视频中运动目标跟踪算法的研究.doc

视频中运动目标跟踪算法的研究.doc

"互动学习:行动中的多样性与论文攻读经历"

多样性她- 事实上SCI NCES你的时间表ECOLEDO C Tora SC和NCESPOUR l’Ingén学习互动,互动学习以行动为中心的强化学习学会互动,互动学习,以行动为中心的强化学习计算机科学博士论文于2021年9月28日在Villeneuve d'Asq公开支持马修·瑟林评审团主席法布里斯·勒菲弗尔阿维尼翁大学教授论文指导奥利维尔·皮耶昆谷歌研究教授:智囊团论文联合主任菲利普·普雷教授,大学。里尔/CRISTAL/因里亚报告员奥利维耶·西格德索邦大学报告员卢多维奇·德诺耶教授,Facebook /索邦大学审查员越南圣迈IMT Atlantic高级讲师邀请弗洛里安·斯特鲁布博士,Deepmind对于那些及时看到自己错误的人...3谢谢你首先,我要感谢我的两位博士生导师Olivier和Philippe。奥利维尔,"站在巨人的肩膀上"这句话对你来说完全有意义了。从科学上讲,你知道在这篇论文的(许多)错误中,你是我可以依

Objective-C中的推送通知与APNs实现

# 1. 推送通知简介 推送通知是移动应用开发中常用的一种技术,它可以向用户发送消息、提醒或通知,即使用户并未在使用应用时也能及时获取重要信息。在Objective-C中,实现推送通知需要使用苹果提供的苹果推送通知服务(APNs)。本章将介绍推送通知的基础知识,包括推送通知的概念、作用和原理。接下来我们将深入了解。 ### 1.1 什么是推送通知 推送通知是通过网络将消息发送到设备的一种技术。应用程序可以向设备发送推送通知,无论用户当前是否在使用该应用,都可以及时获取到消息或通知。用户收到推送通知后,可以通过通知中的内容了解到消息的来源和内容,以便及时处理。 ### 1.2 推送通知的