uniapp上传图片兼容H5和小程序获取微信图像

文章讲述了在uniapp项目中,如何在H5和小程序环境中实现微信图像上传功能,包括在info.vue页面中使用<button>标签的不同配置以及在JS中处理上传的方法。

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

原由:h5中没有微信图像获取,小程序中图方便可以使用微信图像上传

1.在uniapp页面中 info.vue中

   <!-- #ifdef H5 -->
    <!-- 在h5中执行标签内代码 -->
	<button class="avatar-wrapper" open-type="chooseAvatar" @click="upPic">
		<image class="avatar" :src="avatar"></image>
	</button>
    <!-- #endif -->

	<!-- #ifdef MP -->
	<!-- 在小程序中执行标签内代码 -->
	<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
		<image class="avatar" :src="avatar"></image>
	</button>
	<!-- #endif -->

2.在js中使用对应的上传方法

    /* 获取微信图像 */
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail
				console.log('微信图像', avatarUrl);
				uni.uploadFile({
					url: '图片上传接口', //仅为示例,非真实的接口地址
					filePath: avatarUrl,
					name: 'file',
					header: {
						token: uni.getStorageSync('userInfo').token
					},
					success: (res) => {
						// console.log('上传成功后返回', res);						
					}
				})
			},
    // uni普通上传
			upPic() {
				uni.chooseImage({
					count: 1, //默认9,这里设置只允许选择一张图片
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
					sourceType: ['album'], //这里选择从相册选择,也可删除此项设置默认拍照和相册两种选择
					success: res => {
						// 实际开发中,成功的回调函数中是一个上传图片到服务器的接口,这里只是做了简单的效果,实际根据接口需要的参数格式进行上传
						// console.log(JSON.stringify(res.tempFilePaths)); 打印的结果是以数组方式返回的,所以我们只需要取第一个值:["blob:http://localhost:8080/c18cded6-ab83-4d0e-9ccd-ce2e402b7d3f"] 
						let avatarUrl = res.tempFilePaths[0] // 将选择的图片赋值给我们定义的cover
						uni.uploadFile({
							url: '图片上传接口', //仅为示例,非真实的接口地址
							filePath: avatarUrl,
							name: 'file',
							header: {
								token: uni.getStorageSync('userInfo').token
							},
							success: (res) => {
								console.log('上传成功后返回', res);
							}
						})
					}
				});
			},

### 如何在 UniApp 开发的微信小程序中实现 PDF 文件的生成 #### 使用插件 API 的方法 为了实现在 UniApp 中生成 PDF 功能,可以考虑使用 `html2canvas` 结合 `jsPDF` 库来完成这一目标。这两个库能够帮助开发者先将 HTML 页面转换成图像,再通过 jsPDF 将这些图像保存为 PDF 文档。 对于 UniApp 来说,由于其跨平台特性,某些原生 JavaScript 插件可能无法直接运行于微信小程序环境内。因此推荐采用经过适配的小程序组件或服务端解决方案[^1]。 一种可行的方式是在前端利用 html2canvas 把要导出的内容截图下来作为图片流,之后发送给服务器处理;而在服务器一侧,则借助 pdf-lib 或 puppeteer 这样的工具来进行最终的 PDF 创建工作。 另外也可以寻找专门针对微信小程序设计的支持 PDF 生成功能的第三方 SDK 或者云函数服务,它们通常会提供更简便易用的操作接口以及更好的性能表现。 #### 示例代码 下面给出一段简单的示例代码用于说明如何调用微信小程序中的 api 发送 base64 编码后的图片数据至后台: ```javascript // 前端部分:获取页面内容并转为base64编码形式传送至后端 import html2canvas from 'path_to_html2canvas'; export function exportPdf() { const el = document.getElementById('content-to-pdf'); // 获取需要转化为pdf的部分dom节点 html2canvas(el).then(canvas => { let imgData = canvas.toDataURL('image/png'); uni.request({ url: '/api/generate/pdf', // 后台接收地址 method:'POST', data:{ imageBase64 : imgData.split(',')[1], }, success(res){ console.log("success",res); } }); }) } ``` 需要注意的是上述例子仅适用于 H5 平台上测试,在实际项目里还需要做更多兼容安全性方面的考量,并且确保所使用的依赖项能够在微信小程序环境下正常运作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值